序
客戶:列表的CRUD操作全都在列表裏完成。
我:如果表單的數據量多時,可能使用列表不太方便。
客戶:我們之前的系統都是這樣的。
我:可以先試用一下XXX方式,我覺得XXX方式還是挺多優點的。
客戶:強列要求。
我:。。。。那就幹吧。
因爲修改的過程有遇到太多問題,特此做下筆記。
構思
效果
初始化
initGrid: function(request) {
var targetDom = request.layoutElement;
controller.gridInstance = targetDom.find('.material-grid').jqGrid.init( {
height: "140",
autoencode: true,
datatype: function(postData) {
var result = [];
var __db = sessionStorage["material_items"] ? JSON.parse(sessionStorage["material_items"]) : [];
result = {
pageIndex: postData.page,
records: __db.length,
result: '1',
total: Math.ceil(__db.length / postData.rows),
rows: __db
};
$context.$viewUI.list.jqGrid.setRowsRecord($(this), {
records: result,
postdata: postData
});
},
gridComplete: function() {
$context.$viewUI.list.jqGrid.adjustGridHeight($(this));
$(window).bind('resize', function() {
$context.$viewUI.jqGrid.resize();
});
},
colNames: ["序號", '零件', '零件名稱', '數量', '價格'],
colModel: [{
name: 'id',
index: 'id',
editable: false,
sortable: false,
hidden: true
},
{
name: 'partNo',
index: 'partNo',
editable: true,
sortable: false,
edittype: 'text',
editoptions: { class: 'text-center', maxlength: '50' }
},
{
name: 'partName',
index: 'partName',
editable: true,
sortable: false,
edittype: 'text',
editoptions: { class: 'text-center', maxlength: '50' }
},
{
name: 'qty',
index: 'qty',
editable: true,
sortable: false,
edittype: 'text',
editoptions: { class: 'text-center', maxlength: '50' }
},
{
name: 'price',
index: 'price',
editable: true,
sortable: false,
edittype: 'text',
editoptions: { class: 'text-center', maxlength: '50' }
},
],
viewrecords: false,
multiselect: true,
pager: false,
sortname: 'id',
sortorder: "desc",
editurl: $context.$config.localDomain + "ZeroClaim/getProjectNo",
onSelectRow: function(id) {
controller.gridInstance.saveRow(lastrow, false, 'clientArray');
controller.gridInstance.jqGrid('restoreRow', lastrow);
controller.gridInstance.jqGrid('editRow', id, true);
//更新數據
controller.updateRow(lastrow);
lastrow = id;
},
});
request.storage.$materialGrid = controller.gridInstance;
},
這裏主要是JqGrid初始化,
關鍵1:數據源
,可以看出這裏的數據源使用的是本地緩存
。
關鍵2: editurl
,這個是數據編碼後,提交的後臺地址。實際上這個屬性還必須有,不然會報錯。但不嚴格,只有有設置,地址能訪問就可以。對於使用本地數據的,這屬性隨意設置即可。
其它的初始化項就不多說了,其本上看jqgrid的用戶文檔可以輕鬆解決。
實現
添加
addRows: function() {
///Jqgrid 的尿性, 編輯列獲取不到數據。獲取數據時,必須得先取消編輯
//1 獲取數據
var db = sessionStorage["material_items"] ? JSON.parse(sessionStorage["material_items"]) : [];
//2 設置編輯完成
$(db).each(function() {
controller.gridInstance.saveRow(this.id, false, 'clientArray');
controller.gridInstance.jqGrid('restoreRow', this.id);
});
//3 獲取更新
db = controller.gridInstance.getRowData();
//4 插入新行
var rowData = { id: guid() };
db.push(rowData);
//5 更新session 並重新加載
sessionStorage["material_items"] = JSON.stringify(db);
$context.$viewUI.list.jqGrid.reload(controller.gridInstance);
//6 新增的一行需要可編輯
controller.gridInstance.jqGrid('editRow', rowData.id, true, 0);
//7 記錄當前編輯行狀態
lastrow=rowData.id;
},
思路:
1:在db( 本地頁面緩存) 先加一條數據
2:重新加載數據。
3:設置新加的數據爲編輯行。
操作:
如代碼裏的註釋
1: 獲取數據(略)
2: 設置編輯完成
,因爲jqgrid的尿性,獲取不到正在編輯的數據。
官方是這麼解釋的(下圖)。那就必須先把編輯的中行,設置成非編輯行。
3: 獲取更新
獲取列表的數據更新到db,保證db的數據是最新的。
4:db添加新的行。新行需要有一個唯一的標識(id)。
5:列表重新加載數據。
6:設置新增行爲可編輯。並記錄當前編輯行。
編輯
代碼如下:
編輯觸發事件
,這段代碼在初始化裏。
onSelectRow: function(id) {
controller.gridInstance.saveRow(lastrow, false, 'clientArray');
controller.gridInstance.jqGrid('restoreRow', lastrow);
controller.gridInstance.jqGrid('editRow', id, true);
//更新數據
controller.updateRow(lastrow);
lastrow = id;
},
編輯處理邏輯
updateRow: function(id) {
var row = controller.gridInstance.jqGrid('getRowData', id);
var db = sessionStorage["material_items"] ? JSON.parse(sessionStorage["material_items"]) : [];
$(db).each(function() {
if (this.id == row.id) {
this.partNo = row.partNo;
this.partName = row.partName;
this.qty = row.qty;
this.price = row.price;
}
});
sessionStorage["material_items"] = JSON.stringify(db);
// $context.$viewUI.list.jqGrid.reload(controller.gridInstance);
},
思路:
1:選擇列進入編碼。
2:編輯數據。
3:回車保存。
操作:
1:保存完取消編碼狀態。關鍵是
controller.gridInstance.saveRow(lastrow, false, 'clientArray');
2:取得編輯行的數據,更新到db。
刪除
removeRows: function() {
//獲取選中的id
var ids = controller.gridInstance.jqGrid('getGridParam', 'selarrrow');
if (ids.length == 0) {
$context.$viewUI.message.show("請選擇要刪除的零件!");
return;
}
var db = JSON.parse(sessionStorage["material_items"]) || [];
var ndb = [];
for (var i = 0; i < db.length; i++) {
var deleted = false;
for (var j = 0; j < ids.length; j++) {
if (ids[j] == db[i].id) {
deleted = true;
break;
}
}
if (!deleted) {
ndb.push(db[i]);
}
}
sessionStorage["material_items"] = JSON.stringify(ndb);
controller.gridInstance.trigger("reloadGrid");
},
思路
1:獲取選中行
2:刪除DB數據
3:重新加載。
操作
與思路高度一致。
總結
感覺Jqgrid挺原始的,很適合做包裝(稍候提供整個代碼)。但也有一些不足。
坑1:當列處於編碼狀態時,獲取不到直實的內存。而是一堆html控件無素。
坑2:初始化提到的editurl
屬性。必填並且可達,不然報錯。建議在同級文件夾建個空的html文件。
模塊組件封裝整個代碼,已脫敏
。僅供參考。
;
(function(define) {
'use strict';
define(function(require, exports, module) {
function guid() {
return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
var r = Math.random() * 16 | 0,
v = c == 'x' ? r : (r & 0x3 | 0x8);
return v.toString(16);
});
}
//用於記錄最後一次編輯的行
var lastrow;
var controller = {
init: function(request) {
controller.initGrid(request);
controller.bindAdd(request);
controller.bindDelete(request);
},
//綁定數據網格
initGrid: function(request) {
var targetDom = request.layoutElement;
controller.gridInstance = targetDom.find('.material-grid').jqGrid.init( {
height: "140",
autoencode: true,
datatype: function(postData) {
var result = [];
var __db = sessionStorage["material_items"] ? JSON.parse(sessionStorage["material_items"]) : [];
result = {
pageIndex: postData.page,
records: __db.length,
result: '1',
total: Math.ceil(__db.length / postData.rows),
rows: __db
};
$context.$viewUI.list.jqGrid.setRowsRecord($(this), {
records: result,
postdata: postData
});
},
gridComplete: function() {
$context.$viewUI.list.jqGrid.adjustGridHeight($(this));
$(window).bind('resize', function() {
$context.$viewUI.jqGrid.resize();
});
},
colNames: ["序號", '零件', '零件名稱', '數量', '價格'],
colModel: [{
name: 'id',
index: 'id',
editable: false,
sortable: false,
hidden: true
},
{
name: 'partNo',
index: 'partNo',
editable: true,
sortable: false,
edittype: 'text',
editoptions: { class: 'text-center', maxlength: '50' }
},
{
name: 'partName',
index: 'partName',
editable: true,
sortable: false,
edittype: 'text',
editoptions: { class: 'text-center', maxlength: '50' }
},
{
name: 'qty',
index: 'qty',
editable: true,
sortable: false,
edittype: 'text',
editoptions: { class: 'text-center', maxlength: '50' }
},
{
name: 'price',
index: 'price',
editable: true,
sortable: false,
edittype: 'text',
editoptions: { class: 'text-center', maxlength: '50' }
},
],
viewrecords: false,
multiselect: true,
pager: false,
sortname: 'id',
sortorder: "desc",
editurl: "ZeroClaim/getProjectNo",
onSelectRow: function(id) {
controller.gridInstance.saveRow(lastrow, false, 'clientArray');
controller.gridInstance.jqGrid('restoreRow', lastrow);
controller.gridInstance.jqGrid('editRow', id, true);
//更新數據
controller.updateRow(lastrow);
lastrow = id;
},
});
},
updateRow: function(id) {
var row = controller.gridInstance.jqGrid('getRowData', id);
var db = sessionStorage["material_items"] ? JSON.parse(sessionStorage["material_items"]) : [];
$(db).each(function() {
if (this.id == row.id) {
this.partNo = row.partNo;
this.partName = row.partName;
this.qty = row.qty;
this.price = row.price;
}
});
sessionStorage["material_items"] = JSON.stringify(db);
},
addRows: function() {
///Jqgrid 的尿性, 編輯列獲取不到數據。獲取數據時,必須得先取消編輯
//1 獲取數據
var db = sessionStorage["material_items"] ? JSON.parse(sessionStorage["material_items"]) : [];
//2 設置編輯完成
$(db).each(function() {
controller.gridInstance.saveRow(this.id, false, 'clientArray');
controller.gridInstance.jqGrid('restoreRow', this.id);
});
//3 獲取更新
db = controller.gridInstance.getRowData();
//4 插入新行
var rowData = { id: guid() };
db.push(rowData);
//5 更新session 並重新加載
sessionStorage["material_items"] = JSON.stringify(db);
$context.$viewUI.list.jqGrid.reload(controller.gridInstance);
//6 新增的一行需要可編輯
controller.gridInstance.jqGrid('editRow', rowData.id, true, 0);
//7 記錄當前編輯行狀態
lastrow=rowData.id;
},
removeRows: function() {
//獲取選中的id
var ids = controller.gridInstance.jqGrid('getGridParam', 'selarrrow');
if (ids.length == 0) {
alert("請選擇要刪除的數據!");
return;
}
var db = JSON.parse(sessionStorage["material_items"]) || [];
var ndb = [];
for (var i = 0; i < db.length; i++) {
var deleted = false;
for (var j = 0; j < ids.length; j++) {
if (ids[j] == db[i].id) {
deleted = true;
break;
}
}
if (!deleted) {
ndb.push(db[i]);
}
}
sessionStorage["material_items"] = JSON.stringify(ndb);
controller.gridInstance.trigger("reloadGrid");
},
complateEdit: function() {
var db = sessionStorage["material_items"] ? JSON.parse(sessionStorage["material_items"]) : [];
//2 設置編輯完成
$(db).each(function() {
controller.gridInstance.saveRow(this.id, false, 'clientArray');
controller.gridInstance.jqGrid('restoreRow', this.id);
});
//更新db
db = controller.gridInstance.getRowData();
sessionStorage["material_items"] = JSON.stringify(db);
},
bindAdd: function(request) {
var targetDom = request;
targetDom.find(".btn_material_add").bind("click", function() {
controller.addRows();
});
},
bindDelete: function(request) {
var targetDom = request;
targetDom.find('.btn_material_delete').bind("click", function() {
controller.removeRows();
})
}
};
module.exports = controller;
});
})(define);
參考: https://blog.mn886.net/jqGrid/