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

我正在使用jqgrid内联编辑，使用编辑规则在网格中进行验证。我想添加类来突出错误（例如：UI状态错误）的输入验证失败。我可以设置类使用此在jqgrid中验证失败时突出显示错误单元格或输入

jQuery的（ '＃' + grid_id）.jqGrid（ 'setCell'，ROW_ID，errfields并[a]， ''， 'UI状态错误'，{颜色来突出错误： '蓝色'}）;

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

2011-05-13 Shermi

The demo显示了万阿英，蒋达清如何可以解决：

enter image description here

在演示中的列“金额”，“税收”和“总”将与下面的验证规则进行验证：

editrules:{required:true,number:true}

对于任何验证错误，将添加验证失败的条件类“ui-state-error”的第一个输入字段。它是标准的jQuery UI CSS类。附加地，我将焦点设置到输入字段。

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

来源

2011-05-28 14:03:35 Oleg

非常感谢。ans非常有帮助。我是否需要在每个网格中重复'$ .jgrid.checkValues'和'$ .jgrid.hideModal'函数，如果我在页面中有两个可编辑网格。 – Shermi 2011-05-31 04:52:45

@Shermi：'$'，'$ .jgrid'是属于'window'对象的全局对象。所以'$ .jgrid.checkValues'和'$ .jgrid.hideModal'的全名是'window. $。jgrid.checkValues'和'window. $ .jgrid.hideModal'。换句话说，函数checkValues和hideModal不属于网格的实例，因此只能重新实现一次**。 – Oleg 2011-05-31 05:25:46

@Oleg：当使用上面的代码覆盖checkValues方法时，我在Firefox控制台上发现这条线的“太多递归”错误ret = originalCheckValues.call（this，val，valref，g，customobject，nam）; – RRK 2013-03-19 23:38:42

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

来源

2012-08-02 09:11:38 tedyyu

@德鲁伊，感谢您的语法高亮.. – tedyyu 2012-09-20 02:27:18

你能帮我在这方面看看[我的问题]（http://stackoverflow.com/questions/13064210/how-to-use-jquery-validate- JS-到验证细胞合的jqGrid＃comment17744539_13064210） – faizanjehangir 2012-10-25 09:08:22

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

回答

相关问题