Question

我正在使用jqgrid内联编辑，并使用编辑规则在网格中进行验证。我想添加类来突出显示错误的错误（例如：ui-state-error），验证失败。我可以使用此

设置类以突出显示错误

jQuery（'＃'+ grid_id）.jqGrid（'setCell'，row_id，errfields [a]，''，'ui-state-error'，{color：'blue'}）;

但是当内置验证失败时，它无法在jqgrid中运行。如何突出显示验证错误触发的单元格/输入。

Answer 1

The demo显示了如何解决问题：

enter image description here

在演示中，“Amount”，“Tax”和“Total”列将使用以下验证规则进行验证：

editrules:{required:true,number:true}

在任何验证错误上，将添加验证失败的第一个输入字段dditional class“ui-state-error”。它是标准的jQuery UI CSS类。 Addionally我将焦点设置到输入字段。

对于实现，我覆盖（链接）方法$.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);
};

Answer 2

在我的项目中，我结合使用jqgrid和jquery validation plugin来检查和突出显示错误，以在整个应用程序中提供统一的外观。您可以使用rowId_columnName作为ID来查找编辑器（输入，选择等），例如{1}用于第1行中的name列，然后使用jquery对象添加规则，例如$('#1_name')添加规则以强制要求该单元格，然后在提交值时调用$('#1_name').rules('add', {required:true})强制执行验证，例如在调用jqgrid $('#1_name').valid()方法之前。打开插件的链接，了解有关规则方法和有效方法的更多信息。

在jqgrid中验证失败时突出显示错误单元格或输入

2 个答案: