JqGrid，如何使用navGrid時格式錯誤消息

Question

jqGrid 4.13.6-pre - free jqGrid 

我正在使用navGrid和內聯編輯，並且在從服務器發送回格式驗證消息時遇到問題。驗證消息在從內聯編輯返回時顯示正常，但在從網格導航訪問的「添加/編輯」表單上顯示時，它們看起來不太好。

我讀了很多關於errorTextFormat事件，它似乎正是我想要的，但我似乎無法弄清楚如何從grid nav打開表單時訪問它。我確信有一個簡單的方法來配置它，但我一直無法弄清楚。

$(function() { 
     var lastSel = 0; 

     $("#Grid") 
      .jqGrid({ 
       url: '/url/to/griddata', 
       datatype: 'json', 
       mtype: 'POST', 
       colNames: ['Id', 'Name'], 
       colModel: [ 
        { name: 'Id', hidden: false, search: true, width: 150, align: 'center', sortable: true, editable: false, formatter: null, edittype: 'text' }, 
        { name: 'Name', hidden: false, search: true, width: 150, align: 'center', sortable: true, editable: true, formatter: null, edittype: 'text', editoptions: { maxlength: 256, value: null, required: true } }], 
       pager: '#GridPager', 
       prmNames: { 
        page: 'PageNumber', 
        rows: 'PageSize', 
        sort: 'SortColumn', 
        order: 'SortOrder', 
        search: 'Search', 
        nd: 'nd', 
        npage: 'null' 
       }, 
       rowNum: 60, 
       rowList: [ 
        15, 
        30, 
        60, 
        120 
       ], 
       sortname: "Name", 
       sortorder: "asc", 
       viewrecords: true, 
       hidegrid: false, 
       gridview: true, 
       caption: '', 
       width: 980, 
       height: 100, 
       editurl: '/my/edit/url', 
       edit: { 
        errorTextFormat: function (data) { 
         alert('fired'); 
         console.log(data); 
         return "error here"; 
        } 
       }, 
       jsonReader: { 
        total: 'TotalPages', 
        page: 'CurrentPage', 
        records: 'TotalRecords', 
        root: 'Rows', 
        id: 'Id', 
        repeatitems: false 
       }, 
       onSelectRow: function(id) { 
        if (id && id !== lastSel) { 
         jQuery('#Grid').restoreRow(lastSel); 
         lastSel = id; 
        } 
        $('#Grid').jqGrid('editRow', id, 
        { 
         keys: true 
        }); 
       } 
      }); 

     $("#Grid").filterToolbar({ autosearch: true, searchOnEnter: false }); 
     $("#Grid").navGrid('#GridPager', { 
      del: false, search: false, editerrorTextFormat: function (data) { 
       alert('fired'); 
       console.log(data); 
       return "error here"; 
      } 
     }); 

這裏是標記。

Answer 1

有jqGrid的無edit選項和navGrid沒有editerrorTextFormat財產。通過使用formEditing選項很容易修復您的代碼，該選項允許指定默認值editGridRow方法直接或間接地在網格中使用。您只需將選項重命名爲formEditing，並且您的代碼應該可以工作。只有在報告錯誤（例如400或更高）的情況下，服務器應該使用一些錯誤的HTTP狀態碼很重要。錯誤代碼500或更高在我看來是您的案例中的最佳選擇。

以同樣的方式，你可以指定filterToolbar選項或搜索對話框的自由的jqGrid的searching選項裏面。您可以在jqGrid的navOptions選項中指定navGrid的默認選項。

我會建議你另外使用savedRow參數的jqGrid而不是lastSel變量。在開始內聯編輯或單元格編輯時，參數將由jqGrid填充。如果包含之前的修改和id屬性的可編輯值的數組另外。因爲你CAL

我建議你還用pager: true而不是pager: '#GridPager'，只是跳過navGrid或inlineNav'#GridPager'參數。免費的jqGrid會自動生成尋呼機的<div>，它會將唯一的id分配給div，它會修改pager: true參數爲'#generatesIdValueOfTheDiv'。你的代碼會更短，更容易閱讀和維護。

最後的代碼可能看起來像下面

$(function() { 
    $("#Grid") 
     .jqGrid({ 
      url: '/url/to/griddata', 
      datatype: 'json', 
      mtype: 'POST', 
      colModel: [ 
       { name: 'Id', align: 'center' }, 
       { name: 'Name', align: 'center', editable: true, 
        editoptions: { maxlength: 256, required: true } } 
      ], 
      pager: true, 
      prmNames: { 
       page: 'PageNumber', 
       rows: 'PageSize', 
       sort: 'SortColumn', 
       order: 'SortOrder', 
       search: 'Search' 
      }, 
      rowNum: 60, 
      rowList: [ 
       15, 
       30, 
       60, 
       120 
      ], 
      sortname: "Name", 
      viewrecords: true, 
      hidegrid: false, 
      width: 980, 
      height: 100, 
      editurl: '/my/edit/url', 
      jsonReader: { 
       total: 'TotalPages', 
       page: 'CurrentPage', 
       records: 'TotalRecords', 
       root: 'Rows', 
       id: 'Id', 
       repeatitems: false 
      }, 
      formEditing: { 
       closeOnEscape: true, 
       closeAfterEdit: true, 
       savekey: [true, 13], 
       errorTextFormat: function (data) { 
        alert('fired'); 
        console.log(data); 
        return "error here"; 
       } 
      }, 
      inlineEditing: { 
       keys: true 
      }, 
      searching: { 
       searchOnEnter: false 
      }, 
      navOptions: { 
       del: false, 
       search: false 
      }, 
      onSelectRow: function (rowid) { 
       var $self = $(this), i, 
        // savedRows array is not empty if some row is in inline editing mode 
        savedRows = $self.jqGrid("getGridParam", "savedRow"); 

       for (i = 0; i < savedRows.length; i++) { 
        if (savedRows[i].id !== rowid) { 
         // cancel editing of not saved rows 
         $self.jqGrid("restoreRow", savedRows[i].id); 
        } 
       } 

       $self.jqGrid("editRow", rowid); 
      } 
     }) 
     .jqGrid("filterToolbar"); 
     .jqGrid("navGrid"); 
}); 

（我在formEditing增加了一些特性，其中一個經常使用，你可以刪除不需要的屬性）。我刪除了一些不需要的選項和一些不需要的屬性colModel，因爲您指定了默認值值。