datagrid行内实现

datagrid行内实现。后日品种中遇到贰个必要用到了Easyui
datagrd行内加多和编辑数据,同期对行内数据上移下移,所以对这多少个成效做个小结。

1、首先大约说下那多少个职能里用到的显要措施,行内增加数据首即使增多列的editor属性,
行内编写制定主要使用beginEdit,同期叁个器重正是得到眼下的操作行索引editIndex.

2、裁撤用到了rejectChanges(卡塔尔国.

3、保存时选取getRows.
getChanges(卡塔尔(قطر‎首假如得到丰富或编辑的多少,getRows方法运用。

4、在做那几个功用中本人使用了三个系列化前台对象组件,这一个组件能够十分低价的把前台的指标转变成json字符串,然后传入后台,实乃福利非凡让自己别开生面,要精通就在这里个效能后边小编还手动管理数组,使用join(卡塔尔拼字符串,当找到那一个组件时进程效用一下几谈起来了,实在是寸步不移。

5、在做那么些效用,用到这个主意时蒙受的难点,刚初叶时笔者是看easyui的合法demo,作者发觉丰富多少后点保存,再点获取数据时就拿走不到了,后透过测验发掘相近是调用了acceptChanges(卡塔尔(قطر‎引起的主题素材。

function GetTable() { var editRow = undefined; $.datagrid({ height: 300, width: 450, title: '学生表', collapsible: true, singleSelect: true, url: '/Home/StuList', idField: 'ID', columns: [[ { field: 'ID', title: 'ID', width: 100 }, { field: 'Name', title: '姓名', width: 100, editor: { type: 'text', options: { required: true } } }, { field: 'Age', title: '年龄', width: 100, align: 'center', editor: { type: 'text', options: { required: true } } }, { field: 'Address', title: '地址', width: 100, align: 'center', editor: { type: 'text', options: { required: true } } } ]], toolbar: [{ text: '添加', iconCls: 'icon-add', handler: function () { if  { $.datagrid; } if  { $.datagrid('insertRow', { index: 0, row: {} }); $.datagrid; editRow = 0; } } }, '-', { text: '保存', iconCls: 'icon-save', handler: function () { $.datagrid; //如果调用acceptChanges则获取不到编辑和新增的数据。 //使用JSON序列化datarow对象,发送到后台。 var rows = $.datagrid; var rowstr = JSON.stringify; $.post('/Home/Create', rowstr, function ; } }, '-', { text: '撤销', iconCls: 'icon-redo', handler: function () { editRow = undefined; $.datagrid; $.datagrid; } }, '-', { text: '删除', iconCls: 'icon-remove', handler: function () { var row = $.datagrid; } }, '-', { text: '修改', iconCls: 'icon-edit', handler: function () { var row = $.datagrid; if  { if  { $.datagrid; } if  { var index = $.datagrid; $.datagrid; editRow = index; $.datagrid; } } else { } } }, '-', { text: '上移', iconCls: 'icon-up', handler: function ; } }, '-', { text: '下移', iconCls: 'icon-down', handler: function ; } }], onAfterEdit: function (rowIndex, rowData, changes) { editRow = undefined; }, onDblClickRow:function  { if  { $.datagrid; } if  { $.datagrid('beginEdit', rowIndex); editRow = rowIndex; } }, onClickRow:function{ if  { $.datagrid; } } }); } 


//上移function MoveUp() { var row = $.datagrid; var index = $.datagrid; mysort(index, 'up', 'Student_Table'); } //下移function MoveDown() { var row = $.datagrid; var index = $.datagrid; mysort(index, 'down', 'Student_Table');}function mysort(index, type, gridname) { if  { if  { var toup = $.datagrid.rows[index]; var todown = $.datagrid.rows[index - 1]; $.datagrid.rows[index] = todown; $.datagrid.rows[index - 1] = toup; $.datagrid; $.datagrid('refreshRow', index - 1); $.datagrid('selectRow', index - 1); } } else if  { var rows = $.datagrid.length; if  { var todown = $.datagrid.rows[index]; var toup = $.datagrid.rows[index + 1]; $.datagrid.rows[index + 1] = todown; $.datagrid.rows[index] = toup; $.datagrid; $.datagrid('refreshRow', index + 1); $.datagrid('selectRow', index + 1); } }} 

[HttpPost] public ActionResult Create() { string result = Request.Form[0]; //后台拿到字符串时直接反序列化。根据需要自己处理 var list = JsonConvert.DeserializeObject>; return Json; } 

以上正是本文的全部内容,希望对我们的学习抱有利于,也目的在于大家多多关照脚本之家。

发表评论

电子邮件地址不会被公开。 必填项已用*标注