выделите ячейку с ошибкой или ввод при сбое проверки в jqgrid

Question

Я использую встроенное редактирование jqgrid с проверкой в ​​сетке с использованием правил редактирования. я хочу добавить класс, чтобы выделить ошибки (например: ui-state-error) для ввода, который не проходит проверку. я могу установить класс, чтобы выделить ошибку, используя это

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

Но он не работает в jqgrid, когда встроенная проверка завершается неудачно. Как выделить ячейку / вход, вызванную ошибкой проверки.

Answer 1

Демонстрация показывает, как можно решить проблему:

В демоверсии столбцы «Сумма», «Налог» и «Итого»будет проверено со следующим правилом проверки:

editrules:{required:true,number:true}

При любой ошибке проверки будет добавлено первое поле ввода, в котором проверка завершилась неудачей, дополнительный класс «ui-state-error».Это стандартный CSS-класс jQuery UI.Дополнительно я устанавливаю фокус на поле ввода.

Для реализации я переопределяю (цепочку) реализацию по умолчанию методов $.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 для изучения и выделения ошибок, чтобы обеспечить единый внешний вид во всем приложении. Вы можете использовать rowId_columnName в качестве идентификатора для поиска редактора (ввод, выбор и т. Д.), Например, $('#1_name') для столбца имени в строке 1, а затем используйте объект jquery для добавления правил, например, $('#1_name').rules('add', {required:true}) чтобы добавить правило для принудительного подтверждения того, что ячейка требуется, а затем вызвать $('#1_name').valid() для принудительного прохождения проверки при отправке значения, например, перед вызовом jqgrid saveRow метода. Откройте ссылку для плагина, чтобы узнать больше о методе правил и действительном методе.