easyui datagrid 行編輯和提交方,廢話就不多說(shuō)了,直接上代碼
1 <div style="margin: 5px;"> 2 <table id="dg" class="easyui-datagrid" title="確認(rèn)單據(jù)" style="width: 100%; height: 540px; margin: 20px;" 3 data-options="loadMsg: '正在加載,請(qǐng)稍候...', 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'">單據(jù)ID</th>25 <th data-options="field:'obj3',width:240,align:'center'">物料描述</th>26 <th data-options="field:'obj4',width:75,align:'center'">計(jì)劃數(shù)量</th>27 <th data-options="field:'obj5',width:75,align:'center'">計(jì)劃重量</th>28 <th data-options="field:'obj6',width:80,align:'center'">實(shí)際入庫(kù)數(shù)量</th>29 <th data-options="field:'obj7',width:80,align:'center'">實(shí)際入庫(kù)重量</th>30 <th data-options="field:'obj8',width:80,align:'center',editor:'text'">入高架庫(kù)數(shù)量</th>31 <th data-options="field:'obj9',width:80,align:'center',editor:{type:'text'}">入高架庫(kù)重量</th>32 <th data-options="field:'obj10',width:80,align:'center',editor:{type:'text'}">入線邊庫(kù)數(shù)量</th>33 <th data-options="field:'WorkName',width:80,align:'center',editor:{type:'text'}">入線邊庫(kù)重量</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 屬性雙擊行改變行狀態(tài),用于編輯數(shù)據(jù)
<th data-options="field:'WorkName',width:80,align:'center',editor:{type:'text'}">入線邊庫(kù)重量</th>
其中的
editor:{type:'text'} 屬性可以在雙擊后啟用單元格的狀態(tài)
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"); //獲取添加狀態(tài)的行30 // var deleted = $dg.datagrid('getChanges', "deleted");//獲取刪除狀態(tài)的行31 var updated = $dg.datagrid('getChanges', "updated");//獲取修改狀態(tài)的行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("提示", "提交錯(cuò)誤了!");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 //獲取數(shù)據(jù)后的其他操作
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注