Jqgrid如何添加自定義錯誤來顯示在表

Question

如何添加自定義錯誤消息顯示在jqgrid表中如果沒有數據或數據沒有找到 是否有可能呢？

這裏是我的代碼的打擊和屏幕抓取

代碼

<script type="text/ecmascript" src="https://code.jquery.com/jquery-1.12.0.min.js"></script> 
    <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.10.2/jquery-ui.min.js"></script> 

    <script type="text/javascript"> 
     $.jgrid.no_legacy_api = true; 
     $.jgrid.useJSON = true; 
    </script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.13.1/js/jquery.jqgrid.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/js/bootstrap.min.js"></script> 
    $(document).ready(function() { 

     var mydata; 
     var collateralid= getQueryUrlString("id");  
     console.log(collateralid); 

     $(".monitoring-red").jqGrid({ 

      url:"json/data-"+collateralid.trim()+".json", 
      data: mydata, 
      datatype: "json", 
      emptyrecords: "0 records found", 
      postData: { 
       json: JSON.stringify(mydata) 
      }, 
      success: function(mydata, textStatus, jqXHR) { 
        console.log(" data :" +mydata); 
      }, 
      colModel: [ 
       { name: 'ClientID', label: 'ClientId',width: 70, key: true, 
       formatter: "showlink", 
        formatoptions: { 
         baseLinkUrl: testUrl, 
         idName: "", 
         addParam: function (options) { 
          return "clientid="+options.rowid+"-20160408" ; 
         } 
        } 

       }, 
       { name: 'Borrower',label: 'Borrower', align:'right', width: 115 }, 
       { name: 'Brokerage',label: 'Brokeage', align:'right', width: 125 }, 
       { name: 'LoanBalance', label: 'Loan Balance',align:'right',width: 100, formatter: 'currency', 
        formatoptions: { prefix: "$", suffix: " "}}, 
       /*{ label: 'Value1', 
          name: 'Value1', 
          width: 80, 
          sorttype: 'number', 
          formatter: 'number', 
          align: 'right' 
         }, */ 
       { name: 'MaxLoanAmt', label: 'MaxLoanAmt', width: 120, sorttype: 'number' , align: "right", formatter: 'currency', formatoptions: { prefix: " $", suffix: " "}}, 
       { name: 'AvailableCredit', label: 'Available Credit', width: 110, sorttype: 'number' , align: "right", formatter: 'currency', formatoptions: { prefix: " $", suffix: " "}}, 
       { name: 'Watch', label: 'Watch', width: 120, sorttype: 'number' , align: "right", template: "number",formatoptions: {decimalPlaces: 9}}, 
       { name: 'PledgedValue', label: 'PledgedValue',width: 120, sorttype: 'number', align: "right", formatter: 'currency', formatoptions: { prefix: " $", suffix: " "} }, 
       { name: 'AverageLTV', label: 'AverageLTV',width: 75, sorttype: 'number', align: "right", formatter: 'currency', formatoptions: { prefix: "", suffix: " "} } 

      ], 
      additionalProperties: ["Num1"], 
      beforeProcessing: function (mydata) { 
       var item, i, n = mydata.length; 
       for (i = 0; i < n; i++) { 
        item = mydata[i]; 
        item.LoanBalance = parseFloat($.trim(item.LoanBalance).replace(",", "")); 
        item.MaxLoanAmt = parseFloat($.trim(item.MaxLoanAmtMaxLoanAmt).replace(",", "")); 
        item.AvailableCredit = parseFloat($.trim(item.AvailableCredit).replace(",", "")); 
        // item.Num1 = parseInt($.trim(item.Num1).replace(",", ""), 10); 
        // item.Num2 = parseInt($.trim(item.Num2).replace(",", ""), 10); 
       } 
      }, 
      iconSet: "fontAwesome", 
      loadonce: true, 
      rownumbers: true, 
      cmTemplate: { autoResizable: true, editable: true }, 
      autoResizing: { compact: true }, 
      forceClientSorting: true, 
      sortname: "Symbol", 
      height:"auto", 
      caption: "<b>Collateral Monitoring Red</b>", 
      viewrecords: true, 


      errorDisplayTimeout: '', //never expire 

       loadError: function (jqXHR, textStatus, errorThrown) { 
      var p = $(this).jqGrid("getGridParam"), 
       $errorDiv = $(this.grid.eDiv), 
       $errorSpan = $errorDiv.children(".ui-jqgrid-error"); 

      $errorSpan.html("My custom error message"); 
      $errorDiv.show(); 
      if (p.errorDisplayTimeout) { 
       setTimeout(function() { 
        $errorSpan.empty(); 
        $errorDiv.hide(); 
       }, p.errorDisplayTimeout); 
      } 
     }, 



      loadComplete: function() { 
       var $self = $(this), 
        sum = $self.jqGrid("getCol", "Price", false, "sum"), 
        sum1 = $self.jqGrid("getCol", "MaxLoanAmt", false, "sum"); 

       $self.jqGrid("footerData", "set", {invdate: "Total:", Price: sum, maxLoanAmt: sum1}); 
      } 
     }); 

Answer 1

有很長時間以來loadError回調。例如，The old answer顯示了它如何使用。主要問題是它不是默認實現回調填充jqGrid 4.12.1（見here）。因此，如果加載失敗，用戶可能會看到一些錯誤消息。

另一方面，我看到新的div.ui-jqgrid-errorbar和SPAN span.ui-jqgrid-error的使用尚未描述。因此我爲您創建了the simple demo，這證明了它。此外，我使用errorDisplayTimeout選項設置爲3秒，這可以與錯誤div結合使用。對應的代碼是

errorDisplayTimeout: 3000, 
loadError: function (jqXHR, textStatus, errorThrown) { 
    var p = $(this).jqGrid("getGridParam"), 
     $errorDiv = $(this.grid.eDiv), 
     $errorSpan = $errorDiv.children(".ui-jqgrid-error"); 

    $errorSpan.html("My custom error message"); 
    $errorDiv.show(); 
    if (p.errorDisplayTimeout) { 
     setTimeout(function() { 
      $errorSpan.empty(); 
      $errorDiv.hide(); 
     }, p.errorDisplayTimeout); 
    } 
} 

在可以顯示基於其由error回調jQuery.ajax轉發到loadErrorjqXHR，textStatus，errorThrown參數的任何其它錯誤文本的方式相同。

如果你想使用相同的div來顯示沒有數據的錯誤信息，你可以用同樣的方法做到這一點。理解沒有數據不會被解釋爲錯誤是很重要的。因此將調用loadComplete而不是loadError。在loadComplete回調內部，您仍然可以檢查總行數（$(this).jqGrid("getGridParam", "records")）或當前頁面上的行數（$(this).jqGrid("getGridParam", "reccount")），並以與在loadError內顯示相同的方式顯示自定義消息。

更新：我增加了新的方法displayErrorMessage到最新的代碼在GitHub上，以簡化使用錯誤的div（見the commit）工作。 The demo使用新的方法和loadError的代碼被減少到一個行：

errorDisplayTimeout: 3000, 
loadError: function (jqXHR, textStatus, errorThrown) { 
    $(this).jqGrid("displayErrorMessage", "My custom error message"); 
}