The demo http://www.ok-soft-gmbh.com/jqGrid/SimpleLocalGridWithInlineEditing.htm显示如何解决该问题:
在演示中,“金额”、“税”和“总计”列将使用以下验证规则进行验证:
editrules:{required:true,number:true}
对于任何验证错误,验证失败的第一个输入字段将添加额外的类“ui-state-error”。它是标准的 jQuery UI CSS 类。另外,我将焦点设置到输入字段。
对于实现,我覆盖(链接)方法的默认实现$.jgrid.checkValues
and $.jgrid.hideModal
。这是相应的代码:
var grid = $("#list");
grid.jqGrid({
// define all jqGrid options
});
var originalCheckValues = $.jgrid.checkValues,
originalHideModal = $.jgrid.hideModal,
iColWithError = 0;
$.jgrid.checkValues = function(val, valref,g, customobject, nam) {
var tr,td,
ret = originalCheckValues.call(this,val, valref,g, customobject, nam);
if (!ret[0]) {
tr = g.rows.namedItem(editingRowId);
if (tr) {
$(tr).children('td').children('input.editable[type="text"]').removeClass("ui-state-error");
iColWithError = valref; // save to set later the focus
//error_td_input_selector = 'tr#'+editingRowId+' > td:nth-child('+(valref+1)+') > input.editable[type="text"]:first';
td = tr.cells[valref];
if (td) {
$(td).find('input.editable[type="text"]').addClass("ui-state-error");
}
}
}
return ret;
};
$.jgrid.hideModal = function (selector,o) {
var input, oldOnClose, td,
tr = grid[0].rows.namedItem(editingRowId);
if (tr) {
td = tr.cells[iColWithError];
if (td) {
input = $(td).children('input.editable[type="text"]:first');
if (input.length > 0) {
oldOnClose = o.onClose;
o.onClose = function(s) {
if ($.isFunction(oldOnClose)) {
oldOnClose.call(s);
}
setTimeout(function(){
input.focus();
},100);
};
}
}
}
originalHideModal.call(this,selector,o);
};