Easyui 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 ></table>
101 </body>
102 </html>
jQuery UI