首页 > 代码库 > Eary UI datagrid 批量编辑和提交
Eary UI datagrid 批量编辑和提交
1 <script type="text/javascript"> 2 $(function() { 3 var $dg = $("#dg"); 4 $dg.datagrid({ 5 url : "servlet/list", 6 width : 700, 7 height : 250, 8 columns : [ [ { 9 field : ‘code‘, 10 title : ‘Code‘, 11 width : 100, 12 editor : "validatebox" 13 }, { 14 field : ‘name‘, 15 title : ‘Name‘, 16 width : 200, 17 editor : "validatebox" 18 }, { 19 field : ‘price‘, 20 title : ‘Price‘, 21 width : 200, 22 align : ‘right‘, 23 editor : "numberbox" 24 } ] ], 25 toolbar : [ { 26 text : "添加", 27 iconCls : "icon-add", 28 handler : function() { 29 $dg.datagrid(‘appendRow‘, {}); 30 var rows = $dg.datagrid(‘getRows‘); 31 $dg.datagrid(‘beginEdit‘, rows.length - 1); 32 } 33 }, { 34 text : "编辑", 35 iconCls : "icon-edit", 36 handler : function() { 37 var row = $dg.datagrid(‘getSelected‘); 38 if (row) { 39 var rowIndex = $dg.datagrid(‘getRowIndex‘, row); 40 $dg.datagrid(‘beginEdit‘, rowIndex); 41 } 42 } 43 }, { 44 text : "删除", 45 iconCls : "icon-remove", 46 handler : function() { 47 var row = $dg.datagrid(‘getSelected‘); 48 if (row) { 49 var rowIndex = $dg.datagrid(‘getRowIndex‘, row); 50 $dg.datagrid(‘deleteRow‘, rowIndex); 51 } 52 } 53 }, { 54 text : "结束编辑", 55 iconCls : "icon-cancel", 56 handler :endEdit 57 }, { 58 text : "保存", 59 iconCls : "icon-save", 60 handler : function() { 61 endEdit(); 62 if ($dg.datagrid(‘getChanges‘).length) { 63 var inserted = $dg.datagrid(‘getChanges‘, "inserted"); 64 var deleted = $dg.datagrid(‘getChanges‘, "deleted"); 65 var updated = $dg.datagrid(‘getChanges‘, "updated"); 66 67 var effectRow = new Object(); 68 if (inserted.length) { 69 effectRow["inserted"] = JSON.stringify(inserted); 70 } 71 if (deleted.length) { 72 effectRow["deleted"] = JSON.stringify(deleted); 73 } 74 if (updated.length) { 75 effectRow["updated"] = JSON.stringify(updated); 76 } 77 78 $.post("servlet/commit", effectRow, function(rsp) { 79 if(rsp.status){ 80 $.messager.alert("提示", "提交成功！"); 81 $dg.datagrid(‘acceptChanges‘); 82 } 83 }, "JSON").error(function() { 84 $.messager.alert("提示", "提交错误了！"); 85 }); 86 } 87 } 88 } ] 89 }); 90 91 function endEdit(){ 92 var rows = $dg.datagrid(‘getRows‘); 93 for ( var i = 0; i < rows.length; i++) { 94 $dg.datagrid(‘endEdit‘, i); 95 } 96 } 97 }); 98 </script> 99 <body>100 <table id="dg" title="批量操作"></table>101 </body>102 </html>
ASP.NET MVC3版本
1 //获取编辑数据 这里获取到的是json字符串 2 string deleted = Request.Form["deleted"]; 3 string inserted = Request.Form["inserted"]; 4 string updated = Request.Form["updated"]; 5 6 if(deleted != null){ 7 //把json字符串转换成对象 8 List<Bean> listDeleted = JsonDeserialize<List<Bean>>(deleted); 9 //TODO 下面就可以根据转换后的对象进行相应的操作了10 }11 12 if(inserted != null){13 //把json字符串转换成对象14 List<Bean> listInserted = JsonDeserialize<List<Bean>>(inserted);15 }16 17 if(updated != null){18 //把json字符串转换成对象19 List<Bean> listUpdated = JsonDeserialize<List<Bean>>(updated);20 }
JsonDeserialize方法：
private T JsonDeserialize<T>(string jsonString){ DataContractJsonSerializer ser = new DataContractJsonSerializer(typeof(T)); MemoryStream ms = new MemoryStream(Encoding.UTF8.GetBytes(jsonString)); T obj = (T)ser.ReadObject(ms); return obj;}
里面用到的JSON.stringify，主要是把对象转换为字符串的作用。原代码在这里
注意下载这个js后，如果运行出错就去掉最后几行代码。如下删除
1 if (!Object.prototype.toJSONString) {2 Object.prototype.toJSONString = function (filter) {3 return JSON.stringify(this, filter);4 };5 Object.prototype.parseJSON = function (filter) {6 return JSON.parse(this, filter);7 };8 }
来源 ： http://www.jeasyuicn.com/easyui-datagrid-batch-edit-and-submit.html
Eary UI datagrid 批量编辑和提交
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。