在jqgrid中验证失败时突出显示错误单元格或输入 [英] highlight error cell or input when validation fails in jqgrid

问题描述

我正在使用jqgrid内联编辑，并使用编辑规则在网格中进行了验证.我想为验证失败的输入添加类以突出显示错误(例如:ui-state-error). 我可以设置班级以突出显示错误

I am using jqgrid inline editing with validation in grid using edit rules . i want to add class to highlight errors(eg: ui-state-error) for the input which fails in validation . i can set class to highlight error using this

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

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

但是当内置验证失败时，它在jqgrid中不起作用. 如何突出显示触发单元格/输入的验证错误.

But it is not working in jqgrid when inbuilt validation fails . How do i highlight the validation error triggered cell/input .

推荐答案

演示显示了如何解决该问题:

The demo shows how the probelm can be solved:

在演示中，将使用以下验证规则来验证金额"，税收"和总计"列:

In the demo the columns "Amount", "Tax" and "Total" will be validated with the following validation rule:

editrules:{required:true,number:true}

在任何验证错误上，将添加验证失败的传统附加类"ui-state-error"的第一个输入字段.它是标准的jQuery UI CSS类.另外，我将焦点设置在输入字段上.

On any validation error the first input field where the validation failed dditional class "ui-state-error" will be added. It is the standard jQuery UI CSS class. Addionally I set focus to the input field.

对于实现，我重写了(链接)方法$.jgrid.checkValues和$.jgrid.hideModal的默认实现.这是相应的代码:

For the implementation I overwride (chain) the default implementation of the methods $.jgrid.checkValues and $.jgrid.hideModal. Here is the corresponding code:

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中验证失败时突出显示错误单元格或输入的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！