序
客户:列表的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/