在jqgrid中validation失败时突出显示错误单元格或input

我正在使用编辑规则在网格中使用jqgrid内嵌编辑和validation。 我想添加类来突出显示错误(例如:用户状态错误)inputvalidation失败。 我可以设置类来突出使用这个错误

jQuery('#'+ grid_id).jqGrid('setCell',row_id,errfields [a],'','ui-state-error',{color:'blue'});

但是当内置validation失败时,它不能在jqgrid中工作。 我如何突出显示validation错误触发单元格/input。

演示显示如何解决问题:

在这里输入图像描述

在演示中,“金额”,“税”和“总计”列将通过以下validation规则进行validation:

editrules:{required:true,number:true} 

在任何validation错误上,将添加validation失败的第一个input字段dditional类“ui-state-error”。 这是标准的jQuery UI CSS类。 另外我把焦点设置到input字段。

对于实现我overwride(链)方法$.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和jQueryvalidation插件来检查和突出显示错误,在整个应用程序中提供统一的外观和感觉。 您可以使用rowId_columnName作为idfind编辑器(input,select等),例如$('#1_name')第1行名称列,然后使用jquery对象添加规则,例如$('#1_name').rules('add', {required:true})添加一条规则来强制单元格是必需的,然后在提交值时调用$('#1_name').valid()例如在调用jqgrid saveRow方法之前。 打开链接为插件了解更多关于规则方法和有效的方法。