Eary UI datagrid 批量编辑和提交

时间：2014-11-13 23:47:47 阅读：411 评论：0 收藏：0 [点我收藏+]

  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>

jQuery UI

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 }

MVC3

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 批量编辑和提交

原文：http://www.cnblogs.com/izhiniao/p/4096093.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年09月23日 (328)
2021年09月24日 (313)
2021年09月17日 (191)
2021年09月15日 (369)
2021年09月16日 (411)
2021年09月13日 (439)
2021年09月11日 (398)
2021年09月12日 (393)
2021年09月10日 (160)
2021年09月08日 (222)