在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中驗證失敗時突出顯示錯誤單元格或輸入

回答

相關問題