原文转自：http://www.cnblogs.com/lanyunhua/p/3285457.html
Jquery easyui 批量处理datagrid的数据
最近用JQuery EasyUI做项目时,需要在客户端批量处理数据,根据官方的Demo,使用json传递数据到后台,后台通过接收到的json数据,反序列化成一系列model对象,然而进行增删查改操作.现整理如下:
1 <html> 2 <head> 3 <meta name="viewport" content="width=device-width" /> 4 <title>Index</title> 5 <link href="~/themes/Easyui/default/easyui.css" rel="stylesheet" /> 6 <link href="~/themes/Easyui/icon.css" rel="stylesheet" /> 7 <script src="~/scripts/jquery-1.9.1.min.js"></script> 8 <script src="~/scripts/jquery.easyui.min.js"></script> 9 <script src="~/scripts/easyui-lang-zh_CN.js"></script> 10 <script type="text/javascript"> 11 var editIndex = undefined; 12 $(function () { 13 bindData(); 14 bindAddButton(); 15 bindDelButton(); 16 bindSaveButton(); 17 }); 18 19 20 function bindData() { 21 $('#dg').datagrid({ 22 title: '部门管理', 23 url: '/Home/GetBranch', 24 pagination: true, 25 singleSelect: true, 26 rownumbers: true, 27 pageNumber: 1, 28 height: 420, 29 pageSize: 10, 30 onClickRow: onClickRow, 31 pageList: [10, 15, 20, 25, 30], 32 columns: [[ 33 { field: 'ID', title: 'ID', hidden: true }, 34 { field: 'BrcName', title: '部门名称' ,editor:"text"}, 35 { field: 'BrcComment', title: '备注', editor: "text" } 36 ]], 37 toolbar: '#tb' 38 }); 39 } 40 41 //编辑状态 42 function endEditing() { 43 if (editIndex == undefined) { return true } 44 if ($('#dg').datagrid('validateRow', editIndex)) { 45 var ed = $('#dg').datagrid('getEditor', { index: editIndex, field: 'productid' }); 46 $('#dg').datagrid('endEdit', editIndex); 47 editIndex = undefined; 48 return true; 49 } else { 50 return false; 51 } 52 } 53 54 //单击某行进行编辑 55 function onClickRow(index) { 56 if (editIndex != index) { 57 if (endEditing()) { 58 $('#dg').datagrid('selectRow', index) 59 .datagrid('beginEdit', index); 60 editIndex = index; 61 } else { 62 $('#dg').datagrid('selectRow', editIndex); 63 } 64 } 65 } 66 67 //添加一行 68 function append() { 69 if (endEditing()) { 70 $('#dg').datagrid('appendRow', { }); 71 editIndex = $('#dg').datagrid('getRows').length - 1; 72 $('#dg').datagrid('selectRow', editIndex) 73 .datagrid('beginEdit', editIndex); 74 } 75 } 76 //删除一行 77 function remove() { 78 if (editIndex == undefined) { return } 79 $('#dg').datagrid('cancelEdit', editIndex) 80 .datagrid('deleteRow', editIndex); 81 editIndex = undefined; 82 } 83 //撤销编辑 84 function reject() { 85 $('#dg').datagrid('rejectChanges'); 86 editIndex = undefined; 87 } 88 89 //获得编辑后的数据,并提交到后台 90 function saveChanges() { 91 if (endEditing()) { 92 var $dg = $('#dg'); 93 var rows = $dg.datagrid('getChanges'); 94 if (rows.length) { 95 var inserted = $dg.datagrid('getChanges', "inserted"); 96 var deleted = $dg.datagrid('getChanges', "deleted"); 97 var updated = $dg.datagrid('getChanges', "updated"); 98 var effectRow = new Object(); 99 if (inserted.length) { 100 effectRow["inserted"] = JSON.stringify(inserted); 101 } 102 if (deleted.length) { 103 effectRow["deleted"] = JSON.stringify(deleted); 104 } 105 if (updated.length) { 106 effectRow["updated"] = JSON.stringify(updated); 107 } 108 } 109 } 110 $.post("/Home/Commit", effectRow, function (rsp) { 111 if (rsp) { 112 $dg.datagrid('acceptChanges'); 113 bindData(); 114 } 115 }, "JSON").error(function () { 116 $.messager.alert("提示", "提交错误了！"); 117 }); 118 119 } 120 121 function bindSaveButton() { 122 $("#saveButton").click(function () { 123 saveChanges(); 124 }); 125 } 126 function bindAddButton() { 127 $("#addButton").click(function () { 128 append(); 129 }); 130 } 131 function bindDelButton() { 132 $("#delButton").click(function () { 133 remove(); 134 }); 135 } 136 </script> 137 </head> 138 <body> 139 <table id="dg"> 140 </table> 141 <div id="tb"> 142 <a href="javascript:void(0);" class="easyui-linkbutton" data-options="iconCls:'icon-add',plain:true" id="addButton">新增</a> 143 <a href="javascript:void(0);" class="easyui-linkbutton" data-options="iconCls:'icon-remove',plain:true" id="delButton">删除</a> 144 <a href="javascript:void(0);" class="easyui-linkbutton" data-options="plain:true,iconCls:'icon-save'" id="saveButton">保存</a> 145 </div> 146 </body> 147 </html>
1 public ActionResult Commit() { 2 string deleted = Request.Form["deleted"]; 3 string inserted = Request.Form["inserted"]; 4 string updated = Request.Form["updated"]; 5 if (deleted != null) 6 { 7 //把json字符串转换成对象 8 List<Model.Branch> listDeleted = JsonDeserialize<List<Branch>>(deleted); 9 //下面就可以根据转换后的对象进行相应的操作了 10 } 11 12 if (inserted != null) 13 { 14 //把json字符串转换成对象 15 List<Model.Branch> listInserted = JsonDeserialize<List<Model.Branch>>(inserted); 16 //下面就可以根据转换后的对象进行相应的操作了 17 } 18 19 if (updated != null) 20 { 21 //把json字符串转换成对象 22 List<Branch> listUpdated = JsonDeserialize<List<Branch>>(updated); 23 // 24 }
1 private T JsonDeserialize<T>(string jsonString) 2 { 3 4 DataContractJsonSerializer ser = new DataContractJsonSerializer(typeof(T)); 5 MemoryStream ms = new MemoryStream(Encoding.UTF8.GetBytes(jsonString)); 6 T obj = (T)ser.ReadObject(ms); 7 return obj; 8 }