·您现在的位置: 云翼网络 >> 文章中心 >> 网站建设 >> 网站建设开发 >> ASP.NET网站开发 >> easyuidatagrid批量编辑和提交数据
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 //获取数据后的其他操作