我正在使用 jqgrid 内联编辑并使用编辑规则在网格中进行验证。我想为验证失败的输入添加类以突出显示错误（例如：ui-state-error）。 我可以使用此设置类以突出显示错误
jQuery('#'+grid_id).jqGrid('setCell',row_id,errfields[a],'','ui-state-error',{color: 'blue'});我>
但是当内置验证失败时，它在 jqgrid 中不起作用。 如何突出显示验证错误触发的单元格/输入。
【问题讨论】：
标签： jqgrid
The demo 显示了如何解决问题：
在演示中，“金额”、“税收”和“总计”列将使用以下验证规则进行验证：
editrules:{required:true,number:true}
在出现任何验证错误时，将添加验证失败的第一个输入字段以及其他类“ui-state-error”。它是标准的 jQuery UI CSS 类。此外，我将焦点设置到输入字段。
对于实现，我覆盖（链）方法$.jgrid.checkValues 和$.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);
};
【讨论】：
$、$.jgrid 是属于window 对象的全局对象。所以$.jgrid.checkValues和$.jgrid.hideModal的全称是window.$.jgrid.checkValues和window.$.jgrid.hideModal。换句话说，函数checkValues 和hideModal 不属于网格的实例，因此应该仅重新实现一次。
在我的项目中，我结合使用 jqgrid 和jquery validation plugin 来检查和突出显示错误，以在整个应用程序中提供统一的外观。您可以使用rowId_columnName 作为 id 来查找编辑器（输入、选择等），例如$('#1_name') 用于第 1 行中的名称列，然后使用 jquery 对象添加规则，例如$('#1_name').rules('add', {required:true}) 添加一个规则以强制该单元格是必需的，然后调用 $('#1_name').valid() 在提交值时强制验证通过，例如在调用 jqgrid saveRow 方法之前。打开插件链接，了解更多规则方法和有效方法。
【讨论】：