jqGrid 單元格編輯 如何手動結束編輯、重置單元格編輯狀態 getChangedCells獲取不到資料處理
阿新 • • 發佈：2018-12-20
在上篇博文：jqGrid 單元格編輯 自定義下拉選擇框 動態資料來源 通用實現，討論瞭如何用custom edittype實現一個通用的下拉選擇框編輯方案，本文討論的是單元格編輯的另外兩個問題：如何手動結束編輯和如何重置編輯狀態。
1、基於單元格編輯常見使用流程
1）構建jqgrid時cellEdit=true,cellsubmit=‘clientArray’，並在colModel中設定要編輯的列editable=true
2）編輯完後敲enter回車鍵或滑鼠點選其它地方，使編輯生效；
3）呼叫getChangedCells獲取變動行資料；
4）變動資料提交到伺服器後端處理；
5）處理成功後，重置jqgrid的編輯狀態，再次呼叫getChangedCells取不到資料。
2、常見使用流程中的問題
1）使用者編輯完後，可能不會再敲回車鍵或點選表格其它地方，而是直接點選類似“儲存”按鈕；
2）jqgrid沒有提供重置編輯狀態函式，只能通過操作dom修改class實現，意味著需要自己封裝實現。
3、結束編輯和重置編輯狀態的封裝
(function($){
$.jgrid && $.jgrid.extend({
// 表格編輯完，資料儲存完後，編輯狀態還在，呼叫該方法清除該狀態。
acceptChangedCells: function() {
this.each(function(){
var $t= 呼叫jqGrid(‘endEdit’)，jqGrid(‘acceptChangedCells’)即可，具體看個案例。
4、案例說明
頁面截圖：
頁面程式碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>jggrid-endedit</title>
<link rel="stylesheet" href="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://cdn.bootcss.com/font-awesome/4.5.0/css/font-awesome.min.css" />
<link rel="stylesheet" href="https://cdn.bootcss.com/jqgrid/4.6.0/css/ui.jqgrid.css" />
<script src="https://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/jqgrid/4.6.0/js/jquery.jqGrid.min.js"></script>
</head>
<body>
<div class="page-content container">
<div class="page-head" style="padding: 15px 0"> <!-- page-head -->
<button type="button" class="btn btn-sm" onclick="getChangedCells1()">未呼叫endEdit獲取變動資料</button>
<button type="button" class="btn btn-sm" onclick="getChangedCells2()">呼叫endEdit獲取變動資料</button>
<button type="button" class="btn btn-sm" onclick="getChangedCells3()">未重置編輯狀態，獲取變動資料</button>
<button type="button" class="btn btn-sm" onclick="getChangedCells4()">重置編輯狀態，獲取變動資料</button>
</div><!-- page-head -->
<div class="page-body"> <!-- page-body -->
<div class="panel panel-default" id="panel-orders">
<table id="orders"></table>
</div>
</div>
</div>
<script type="text/javascript">
var data = [], rowIds = [];
function getBills() {
var rowCount = 50;
for (var i = 0; i < rowCount; i ++) {
data.push({
sid: i,
bill_id: i,
bill_detail: i,
goods_id: i,
unit_id: i,
package_id: i,
ref_detail: i,
goods_no: i + 1,
goods_name: '零件名稱' + rowCount + i,
car_type_name: '車型' + rowCount + i,
package_name: '包裝器具' + rowCount + i,
unit: i%2==0 ? '件' : '箱',
snp: 0.89,
box_count: rowCount + i,
total_count: rowCount + i,
goods_count: rowCount + i,
out_count: rowCount + i,
bill_no: 'BN0000000' + i,
})
}
$("#orders").jqGrid("clearGridData").jqGrid('setGridParam',{data: data || []}).trigger('reloadGrid');
}
function getChangedCells1() {
var rows = $("#orders").jqGrid("getChangedCells");
console.log("getChangedCells1: ", rows);
}
function getChangedCells2() {
$("#orders").jqGrid("endEdit");
var rows = $("#orders").jqGrid("getChangedCells");
console.log("getChangedCells2: ", rows);
}
function getChangedCells3() {
$("#orders").jqGrid("endEdit");
var rows = $("#orders").jqGrid("getChangedCells");
console.log("getChangedCells3: ", rows);
//TODO, server-request
rows = $("#orders").jqGrid("getChangedCells");
console.log("getChangedCells3: ", rows);
}
function getChangedCells4() {
$("#orders").jqGrid("endEdit");
var rows = $("#orders").jqGrid("getChangedCells");
console.log("getChangedCells4: ", rows);
//TODO, server-request
$("#orders").jqGrid("acceptChangedCells");
rows = $("#orders").jqGrid("getChangedCells");
console.log("getChangedCells4: ", rows);
}
$(function() {
$("#orders").jqGrid({
colModel: [
{label: "零件號", name: "goods_no", width: 60},
{label: "零件名稱", name: "goods_name", width: 180},
{label: "車型", name: "car_type_name", width: 70},
{label: "包裝器具", name: "package_name", width: 70},
{label: "單位", name: "unit", width: 60, editable:true, edittype:'select', editoptions:{value:"件:件;箱:箱"}},
{label: "裝箱率", name: "snp", width: 50, sorttype: "number"},
{label: "箱數", name: "box_count", width: 40, sorttype: "number"},
{label: "需求總數", name: "total_count", width: 70, sorttype: "number"},
{label: "需求數量", name: "goods_count", width: 70,},
{label: "出庫數量", name: "out_count", width: 70, sorttype: "number"},
{label: "訂單號", name: "bill_no", width: 120},
],
datatype: 'local',
rownumbers: true,
height: 300,
rowNum: 1000,
cellEdit: true,
cellsubmit: 'clientArray'
});
getBills();
});
/** jqgrid 擴充套件 start．**/
(function($){
$.jgrid && $.jgrid.extend({
// 表格編輯完，資料儲存完後，編輯狀態還在，呼叫該方法清除該狀態。
acceptChangedCells: function() {
this.each(function(){
var $t= this;
$($t.rows).each(function(j){
if ($(this).hasClass("edited")) {
$(this).removeClass('edited');
$('td.success',this).removeClass('success');
}
});
});
},
endEdit: function() {
var $cell = this.find(" .edit-cell");
if($cell.length > 0) {
var iRow = $cell.closest("tr").index(), iCol = $cell.index();
// $("#orders").jqGrid("validationCell", $cell, "hhhh", iRow, iCol);
this.jqGrid("saveCell", iRow, iCol);
}
}
});
})(jQuery);
</script>
</body>
</html>
程式碼說明：
1）按鈕“未呼叫endEdit獲取變動資料”，如截圖單位由 件 改為 箱時，點選該按鈕獲取變動資料，獲取到的是空陣列[]；
2）按鈕“呼叫endEdit獲取變動資料”，如截圖單位由 件 改為 箱時，點選該按鈕獲取變動資料，獲取到的是第一行資料；
3）按鈕“未重置編輯狀態，獲取變動資料”，如截圖單位由 件 改為 箱時，點選該按鈕獲取變動資料，第二次依然獲取到上次的變動資料；
4）按鈕“重置編輯狀態，獲取變動資料”，如截圖單位由 件 改為 箱時，點選該按鈕獲取變動資料，第二次獲取變動資料是空陣列[]；