序
最近使用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);
效果
