easyuidatagrid批量编辑和提交数据

 1 <div style="margin: 5px;"> 2             <table id="dg" class="easyui-datagrid" title="确认单据" style="width: 100%; height: 540px; margin: 20px;" 3                 data-options="loadMsg: '正在加载，请稍候...', 4                                   nowrap: false, 5                                    border: true, 6                                    methord: 'post', 7                                    collapsible: false, 8                                    fit: false, 9                                    fitColumns: false,10                                    remoteSort: true,11                                    rownumbers: true, 12                                    pagination: true,13                                    pageSize: 20,14                                    pageList: [20, 30, 40, 50, 100],15                                    striped: true, 16                                    toolbar: '#tb',17                                    onClickRow: onClickRow,18                                    singleSelect:false">19                 <thead>20                     <tr>21                        22                         <th data-options="field:'obj2',width:140,align:'center',checkbox:true">物料代码</th>23                         <th data-options="field:'obj1',width:75,display:'none',align:'center'">主键ID</th>24                          <th data-options="field:'DJID',width:70,align:'center'">单据ID</th>25                         <th data-options="field:'obj3',width:240,align:'center'">物料描述</th>26                         <th data-options="field:'obj4',width:75,align:'center'">计划数量</th>27                         <th data-options="field:'obj5',width:75,align:'center'">计划重量</th>28                         <th data-options="field:'obj6',width:80,align:'center'">实际入库数量</th>29                         <th data-options="field:'obj7',width:80,align:'center'">实际入库重量</th>30                         <th data-options="field:'obj8',width:80,align:'center',editor:'text'">入高架库数量</th>31                         <th data-options="field:'obj9',width:80,align:'center',editor:{type:'text'}">入高架库重量</th>32                         <th data-options="field:'obj10',width:80,align:'center',editor:{type:'text'}">入线边库数量</th>33                         <th data-options="field:'WorkName',width:80,align:'center',editor:{type:'text'}">入线边库重量</th>34                     </tr>35                 </thead>36             </table>37             <div id="tb" style="height: auto">38                 <a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-save',plain:true" onclick="accept()">保存</a>39             </div>40 41         </div>
界面：


注意：

Table的 data-options 属性 onClickRow: onClickRow 属性双击行改变行状态，用于编辑数据

<th data-options="field:'WorkName',width:80,align:'center',editor:{type:'text'}">入线边库重量</th>
其中的

editor:{type:'text'} 属性可以在双击后启用单元格的状态

 1  var editIndex = undefined; 2     function endEditing(){ 3         if (editIndex == undefined){return true} 4         if ($('#dg').datagrid('validateRow', editIndex)){ 5             $('#dg').datagrid('endEdit', editIndex); 6             editIndex = undefined; 7             return true; 8         } else { 9             return false;10         }11     }12     function onClickRow(index){13         if (editIndex != index){14             if (endEditing()){15                 $('#dg').datagrid('selectRow', index)16                         .datagrid('beginEdit', index);17                 editIndex = index;18             } else {19                 $('#dg').datagrid('selectRow', editIndex);20             }21         }22     }23   24     function accept(){25         if (endEditing()){26             var rows = $('#dg').datagrid('getChanges');27             var $dg=$('#dg');28             if ($dg.datagrid('getChanges').length) {29                // var inserted = $dg.datagrid('getChanges', "inserted"); //获取添加状态的行30                // var deleted = $dg.datagrid('getChanges', "deleted");//获取删除状态的行31                 var updated = $dg.datagrid('getChanges', "updated");//获取修改状态的行32                 var effectRow = new Object();33                 if (updated.length) {34                     effectRow["updated"] = JSON.stringify(updated);35                 }36                 $.post("/PFK/ashx/UpdateManger.ashx",effectRow, function(rsp) {37                     debugger;38                     if(rsp.status){39                         $.messager.alert("提示", "提交成功！");40                         $dg.datagrid('acceptChanges');41                     }42                 }, "JSON").error(function() {43                    // $.messager.alert("提示", "提交错误了！");44                 });45             }46         }47     }

1  2 string updated = context.Request["updated"];3         List<ShowCCK_DHModle> modelList = null;4         if (updated != "")5         {6             modelList = RFIDScan.CommFunction.JsonDeserialize<List<ShowCCK_DHModle>>(updated);7         }8 //获取数据后的其他操作