你的位置:首页 > ASP.net教程

[ASP.net教程]easyui datagrid 批量编辑和提交数据


easyui datagrid 行编辑和提交方,废话就不多说了,直接上代码

 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 //获取数据后的其他操作