【添加】、【编辑】、【上移】和【下移】在jQuery Easyui数据网格行中实现

前几天在项目中遇到一个需求，用来在Easyui datagrd行中添加和编辑数据，同时在行中上下移动数据，所以把这些功能做一个总结。

1.首先，我们来谈谈这些函数中使用的主要方法。在行中添加数据主要是添加列的editor属性。线内编辑主要使用beginEdit()，endEdit()，同时，一个关键是获取当前操作的行索引editIndex。

2.rejectChanges()用于撤销。

3.保存时，请获取行()或获取更改()。getChanges()主要用于获取添加或编辑的数据，getRows()获取此页面的所有数据，主要与【上移】和【下移】方法配合使用。

4.在执行这个函数时，我使用了一个序列化的前台对象组件[json.js]。这个组件可以方便地将前台对象转换成json字符串，然后传输到后台，真的让我眼前一亮。要知道，就在这个函数之前，我还手动处理了数组，并使用join()来拼写字符串。找到这个组件的时候，速度和效率被提了好几次，真的让我相见恨晚。

5.在做这个功能和使用这些方法的时候，我一开始看了易用户界面的官方演示。发现添加数据后，点击保存后再点击获取数据时，无法获取。经过测试，发现好像是调用acceptChanges()引起的问题。

函数GetTable(){ var editRow=undefined；$(“# Student _ Table”).datagrid({ height: 300，width: 450，title: '学生表，collapsible: true，singleSelect: true，url: '/Home/StuList '，idField: 'ID '，列3360[{ field : ' ID '，title: 'ID '，width: 100 }，{ field: 'Name '，title: '姓名，width: 100，editor: { type: 'text '，options 3360 { required d : true } }，{ field: 'Age '，title: '年龄，width: 100，align: 'center '，editor: { type: 'text '，options : { required d : true } }，{ field: 'Address '，title: '地址，width: 100，align: 'center '，editor: { type: 'text '，options : { required d : true } }]，toolbar: [{ text: '添加，iconcl s 3360 ' icon-add '，处理程序：函数(){ if(editRow！=未定义){ $('#Student_Table ').datagrid('endEdit '，editRow)；} if(editRow==undefined){ $(“# Student _ Table”).datagrid('insertRow '，{ index: 0，row : } })；$(“# Student _ Table”).datagrid('beginEdit '，0)；editRow=0；} } }，'-'，{ text: '保存，iconcl s 3360 ' icon-save '，处理程序：函数(){ $(' # Student _ Table ').datagrid('endEdit '，editRow)；//如果调用acceptChanges()，使用getChanges()则获取不到编辑和新增的数据。 //使用JSON序列化数据行对象，发送到后台。

var row=$(' # Student _ Table ').数据网格(' GetChanges ')；var row str=JSON。stringify(row)；$.post('/Home/Create '，rowstr，function(data){ })；} }、“-”、{ text: '撤销，iconcl s 3360 ' icon-redo '，处理程序： function(){ editRow=undefined；$(“# Student _ Table”).datagrid(' rejectChanges ')；$(“# Student _ Table”).datagrid('取消全选')；} }、“-”、{ text: '删除，iconcl s 3360 ' icon-remove '，处理程序：函数(){ var row=$(' # Student _ Table ').数据网格(' GetSelections ')；} }、“-”、{ text: '修改，iconcl s 3360 ' icon-edit '，处理程序：函数(){ var row=$(' # Student _ Table ').数据网格(' GetSelected ')；如果(划！=null) { if (editRow！=未定义){ $('#Student_Table ').datagrid('endEdit '，editRow)；} if(editRow==未定义){ var index=$(' # Student _ Table ').datagrid('getRowIndex '，行);$(“# Student _ Table”).datagrid('beginEdit '，索引);编辑行=索引；$(“# Student _ Table”).datagrid('取消全选')；} } else { } } }，“-”，{ text: '上移，iconcl s 3360 ' icon-up '，处理程序： function(){ MoveUp()；} }、“-”、{ text: '下移，iconcl s 3360 ' icon-down '，处理程序： function(){ MoveDown()；} }]，onAfterEdit:函数(行索引、行数据、更改){编辑行=未定义；}，ondblclickrow :函数(行索引，rowData) { if (editRow！=未定义){ $('#Student_Table ').datagrid('endEdit '，editRow)；} if(editRow==undefined){ $(“# Student _ Table”).datagrid('beginEdit '，RowIndex)；editRow=rowIndex} }，onclickrow :函数(行索引，rowData){ if (editRow！=未定义){ $('#Student_Table ').datagrid('endEdit '，editRow)；} } });} brbr/上移函数MoveUp(){ var row=$(' # Student _ Table ').数据网格(' GetSelected ')；定义变量索引=$(“# Student _ Table”).datagrid('getRowIndex '，行);mysort(索引、“up”、“Student _ Table”)；} //下移函数MoveDown(){ var row=$(' # Student _ Table ').数据网格(' GetSelected ')；定义变量索引=$(“# Student _ Table”).datagrid('getRowIndex '，行);mysort(索引、“向下”、“学生_表格”)；}函数mysort(索引，类型，网格名){ if(' up '==type){ if(索引！=0) { var toup=$('#' gridname).datagrid('getData ').行[索引];var todown=$(“#”grid name).datagrid('getData ').行[索引-1];$(“#”网格名称).datagrid('getData ').rows[index]=todown；$(“#”网格名称).datagrid('getData ').rows[index-1]=toup；$(“#”网格名称).datagrid('refreshRow '，index)；$(“#”网格名称).datagrid('refreshRow '，index-1)；$(“#”网格名称).datagrid('selectRow '，index-1)；} } else if(' down '==type){ var rows=$(' # '网格名称).datagrid('getRows ').长度；if (index！=row-1){ var todown=$(“#”网格名称).datagrid('getData ').行[索引];var toup=$('#' gridname).datagrid('getData ').行[索引1];$(“#”网格名称).datagrid('getData ').行[索引1]=todown；$(“#”网格名称).datagrid('getData ').row[index]=toup；$(“#”网格名称).datagrid('refreshRow '，index)；$(“#”网格名称).datagrid('refreshRow '，索引1);$(“#”网格名称).数据网格('选择行'，索引1);} } }[http set]公共操作结果Create(){字符串结果=Request .表单[0];//后台拿到字符串时直接反序列化。根据需要自己处理var list=JsonConvert .反序列化对象列表学生（结果);返回Json(真);} 截图：

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。