序
最近使用JqGrid,真是被折腾得死去活来。
说实话jqgrid真的不好用,文档做得不好不说,功能也是做得相当难用。如果可以重来,我要选李白。。好了,吐槽归吐槽。团队还等着Demo干活呢。。
实现思维
之前写过一篇实现jqgrid 增删查改功能的,其中修改也是通过编辑行的方式的,使用的是本地缓存数据库。传送门
本文要实现的是
1:实时编辑完实时提交数据。
2:重写JqGrid的回车,Esc事件。既然那么难用,那就自已实现一套吧。
为什么要重写JqGrid的回车,Esc事件?
1:编辑状态下,按回车,自动提交。按Esc,自动取消保存。
在保存的过程中:保存前,保存处理,保存后处理都无从插入。
2:提交数据的方式写得太死,很难符合使用需求,参考editoption配置。
重写
一:JqGrid 原码修改:去掉enter,esc键响应事件。
- :找到editRow方法。
2:注释事件,在回车
与Esc
事件的响应直接返回。
二:Enter,Esc事件注入。
$(controller.gridSelector).keyup(function(ev) {
if (ev.keyCode == 13 && controller.lastrow) {
if (controller.eidtable) {
//有未完成的编辑
if (controller.lastrow) {
controller.gridInstance.saveRow(controller.lastrow, false, 'clientArray');
controller.gridInstance.jqGrid('restoreRow', controller.lastrow);
//更行数据
if (controller.updateRow(controller.lastrow)) {
//成功
controller.gridInstance.trigger("reloadGrid");
} else { //失败
controller.gridInstance.jqGrid('editRow', controller.lastrow, true);
return;
}
}
// controller.gridInstance.jqGrid('editRow', id, true);
}
} else if (ev.keyCode == 27 && controller.lastrow) {
controller.gridInstance.jqGrid('restoreRow', controller.lastrow);
controller.lastrow = '';//清除编辑状态
alert("取消");
}
});
逻辑见注释。
整个逻辑代码
包括新增,删除,编辑等实现。
Grid的整个实现是模块化的,非常好扩展与封装。
我在需要根据不同业务个性化的地方加上了注释。方便阅读与使用。
;
(function(define) {
'use strict';
define(function(require, exports, module) {
var context = $context;
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);
});
}
//定自定义控件
function cus_eidt_num(value, options) {
var html = '<input type="number" data-decimals="2" value="" maxlength="10" max="999999999" min="0" class="form-control" />';
var t = $(html);
t.val(value);
return $(t);
}
//定自定义控件 赋值
function cus_eidt_num_value(elem, operation, value) {
if (operation === 'get') {
return $(elem).val();
} else if (operation === 'set') {
$(elem).val(value);
}
}
var controller = {
gridSelector: '.grid-area', //列表绑定的对象
gridInstance: {},
lastrow: "",
edigFlag: false,
eidtable: true,
init: function(request, param) {
controller.initGrid(request);
controller.bindAdd(request);
controller.bindDelete(request);
/*
* 搜索
*/
request.layoutElement.find(".btn-op-gridComponent-search").click(function() {
$context.$viewUI.list.jqGrid.reload($(controller.gridInstance));
});
/*
* 重置
*/
request.layoutElement.find(".btn-op-gridComponent-search-reset").click(function() {
var areaDom = request.layoutElement.find('.search-area');
var obj = $context.$viewUI.form.setSimpleFormData(areaDom, {});
}, );
},
initGrid: function(request) {
var targetDom = request.layoutElement;
controller.gridInstance = $context.$viewUI.list.jqGrid.init(targetDom.find(controller.gridSelector), {
height: "140",
autoencode: true,
datatype: function(postData) {
var self = this;
var areaDom = request.layoutElement.find('.search-area');
var obj = JSON.parse(JSON.stringify($context.$viewUI.form.getSimpleFormData(areaDom), function(a, b) {
return typeof b === 'string' ? b.trim() : b
}));
obj.pageSize = postData.rows;
obj.pageIndex = postData.page;
/*
* 查询数据,后端接口路径window.$context.$config.localDomain + 'issuecode/getpage'
*/
window.$context.$sys.net.ajax('get', obj, window.$context.$config.localDomain +
'issuecode/getpage',
function(data) {
window.$context.$sys.net.resultAnalyseForAjax(data, function(analyseResult) {
if (analyseResult.success) {
$context.$viewUI.list.jqGrid.setRowsRecord($(self), {
records: analyseResult.data,
postdata: postData
}, {
jsonReader: {
total: 'total'
}
});
} else {
if (analyseResult.message) {
window.$context.$viewUI.message.showMessageWithCloseButton(analyseResult.message);
}
}
});
});
},
gridComplete: function() {
$context.$viewUI.list.jqGrid.adjustGridHeight($(this));
$(window).bind('resize', function() {
$context.$viewUI.jqGrid.resize();
});
controller.lastrow = ''; //重新加载清空编码状态
},
/**
* 需要自定义
*/
colNames: ['id',
'所在模块', '一级分类', '二级分类', '三级分类', '问题代码', '问题描述', '创建时间', '创建人', '最后更新时间', '最后修改人'
],
colModel: [{
name: 'id',
index: 'id',
hidden: true
},
{
name: 'model',
index: 'model',
sortable: false,
editable: true,
width: '10%'
},
{
name: 'firstLevelSort',
index: 'firstLevelSort',
editable: true,
sortable: false,
width: '10%'
},
{
name: 'secondLevelSort',
index: 'secondLevelSort',
editable: true,
sortable: false,
width: '10%'
},
{
name: 'threeLevelSort',
index: 'threeLevelSort',
editable: true,
sortable: false,
width: '10%'
},
{
name: 'issueCode',
index: 'issueCode',
editable: true,
sortable: false,
width: '10%',
editoptions: {
class: 'text-center',
maxlength: '50'
}
},
{
name: 'remark',
index: 'remark',
editable: true,
sortable: false,
width: '10%'
},
{
name: 'createdDate',
index: 'createdDate',
sortable: false,
width: '15%'
},
{
name: 'creator',
index: 'creator',
sortable: false,
width: '10%'
},
{
name: 'lastUpdatedDate',
index: 'lastUpdatedDate',
sortable: true,
width: '15%'
},
{
name: 'modifier',
index: 'modifier',
sortable: false,
width: '10%'
}
],
viewrecords: false,
multiselect: true,
pager: false,
sortname: 'id',
sortorder: "desc",
loadonce: true,
onSelectRow: function(id) {
controller.onSelectRow(id);
},
});
//马勒戈壁,劳资跟你干上了。
//添加 esc键与enter键事件捕捉
$(controller.gridSelector).keyup(function(ev) {
if (ev.keyCode == 13 && controller.lastrow) {
if (controller.eidtable) {
//有未完成的编辑
if (controller.lastrow) {
controller.gridInstance.saveRow(controller.lastrow, false, 'clientArray');
controller.gridInstance.jqGrid('restoreRow', controller.lastrow);
//更行数据
if (controller.updateRow(controller.lastrow)) {
//成功
controller.gridInstance.trigger("reloadGrid");
} else { //失败
controller.gridInstance.jqGrid('editRow', controller.lastrow, true);
return;
}
}
// controller.gridInstance.jqGrid('editRow', id, true);
}
} else if (ev.keyCode == 27 && controller.lastrow) {
controller.gridInstance.jqGrid('restoreRow', controller.lastrow);
controller.lastrow = ''; //清除编辑状态
alert("取消");
}
});
},
onSelectRow: function(id) {
if (controller.eidtable) {
//有未完成的编辑
if (controller.lastrow) {
//选择与编辑是同一行
if (controller.lastrow == id) return;
controller.gridInstance.saveRow(controller.lastrow, false, 'clientArray');
controller.gridInstance.jqGrid('restoreRow', controller.lastrow);
//更行数据
if (controller.updateRow(controller.lastrow)) {
//成功
} else { //失败
controller.gridInstance.jqGrid('editRow', controller.lastrow, true);
return;
}
}
controller.gridInstance.jqGrid('editRow', id, true);
controller.lastrow = id;
}
},
addRows: function() {
if (controller.lastrow) {
$context.$viewUI.message.show('请完成当成编辑再添加');
return;
}
//插入新列
/**
* 需要自定义
*/
var rowData = {
id: guid(),
model: ''
};
controller.gridInstance.jqGrid('addRowData', rowData.id, rowData, 0);
//新增的一行需要可编辑
controller.onSelectRow(rowData.id);
},
updateRow: function(id) {
var row = controller.gridInstance.jqGrid('getRowData', id);
//校验
/**
* 需要自定义
*/
if (!row.model) {
$context.$viewUI.message.show('模块不能为空');
return false;
}
var url = $context.$config.localDomain + "issuecode/update";
var isSucess = false;
var context = window.$context;
var token = context.$api.auth.getToken(context);
$.ajax({
type: "POST",
async: false,
url: url,
headers: {
Authorization: token
},
data: JSON.stringify(row),
contentType: "application/json",
success: function(data) {
if (data && data.result == "1") {
isSucess = true;
controller.lastrow = ""; //清除lastrow
context.$viewUI.blocker.showTip({
message: data.msg
});
} else {
isSucess = false;
$context.$viewUI.message.show(data.msg);
}
},
error: function(data) {
$context.$viewUI.message.show(data);
isSucess = false;
}
});
return isSucess;
},
removeRows: function() {
//获取选中的id
var ids = controller.gridInstance.jqGrid('getGridParam', 'selarrrow');
if (ids.length == 0) {
$context.$viewUI.message.show("请选择要删除的记录!");
return;
}
$context.$viewUI.message.show("删除");
//删除动作自己写
/**
* 需要自定义
*/
controller.gridInstance.trigger("reloadGrid");
},
bindAdd: function(request) {
var targetDom = request.layoutElement;
targetDom.find(".btn-priod-add").bind("click", function() {
controller.addRows();
});
},
bindEdit: function(request) {
var targetDom = request.layoutElement;
targetDom.find(".btn-priod-edit").bind("click", function() {
// controller.addRows();
});
},
bindDelete: function(request) {
var targetDom = request.layoutElement;
targetDom.find(".btn-period-del").bind("click", function() {
controller.removeRows();
});
}
}
module.exports = controller;
});
})(define);