在jqgrid中验证失败时突出显示错误单元格或输入
我正在使用jqgrid内联编辑,并使用编辑规则在网格中进行验证。我想添加类来突出显示验证失败的输入的错误(例如:ui状态错误)。 我可以使用此选项将类设置为高亮显示错误 jqGrid('setCell',row_id,errfields[a],'','ui-state-error',{color:'blue'}) 但当内置验证失败时,它在jqgrid中不起作用。 如何突出显示验证错误触发的单元格/输入。显示了如何解决问题: 在演示中,“金额”、“税款”和“总额”列将使用以下验证规则进行验证:在jqgrid中验证失败时突出显示错误单元格或输入,jqgrid,Jqgrid,我正在使用jqgrid内联编辑,并使用编辑规则在网格中进行验证。我想添加类来突出显示验证失败的输入的错误(例如:ui状态错误)。 我可以使用此选项将类设置为高亮显示错误 jqGrid('setCell',row_id,errfields[a],'','ui-state-error',{color:'blue'}) 但当内置验证失败时,它在jqgrid中不起作用。 如何突出显示验证错误触发的单元格/输入。显示了如何解决问题: 在演示中,“金额”、“税款”和“总额”列将使用以下验证规则进行验证:
editrules:{required:true,number:true}
在任何验证错误上,将添加验证失败的第一个输入字段附加类“ui状态错误”。它是标准的jQueryUICSS类。此外,我还将焦点设置为输入字段
对于实现,我覆盖(链)方法$.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);
};
在我的项目中,我结合使用jqgrid和检查并突出显示错误,以便在整个应用程序中提供统一的外观。您可以使用
rowId\u columnName
作为id来查找编辑器(输入、选择等),例如$('1_name')
用于第1行的name列,然后使用jquery对象添加规则,例如$('1_name')。rules('add',{required:true})来添加规则以强制要求单元格,然后调用$('1_name')。valid()
在提交值时强制验证通过,例如在调用jqgridsaveRow
方法之前。打开插件链接,了解更多有关规则方法和有效方法的信息。非常感谢。ans非常有用。如果一个页面中有两个以上的可编辑网格,是否需要在每个网格中重复“$.jgrid.checkValues”和“$.jgrid.hideModal”函数。@Shermi:The$
,$.jgrid
是属于窗口的全局对象。因此,$.jgrid.checkValues
和$.jgrid.hideModal
的全名是window.$.jgrid.checkValues
和window.$.jgrid.hideModal
。换句话说,函数checkValues
和hideModal
不属于网格实例,因此只能重新实现一次。@Oleg:当使用上述代码覆盖checkValues方法时,我在Firefox控制台上得到了这一行的“太多递归”错误ret=originalCheckValues.call(this,val,valref,g,customobject,nam);@RRK:我发布的代码没有描述的问题。因此我认为您的代码中存在问题。例如,您插入了我多次建议的代码。@Oleg:谢谢。我已在文档外部插入了上述代码。ready();方法,因此出现了错误方法我不再得到递归错误。除了突出显示单元格外,我还能够在单元格上添加一条qtip错误消息。我现在想禁用带有jqgrid显示的错误消息的弹出对话框。有什么想法吗?你能在这方面帮我看一下吗