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，因为您指定了默认值值。