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と組み合わせることができます。対応するコードは、あなたがjQuery.ajaxのerrorコールバックからloadErrorに転送されjqXHR、textStatus、errorThrownパラメータに基づいて、他のエラーテキストを表示することができます同様に

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); 
    } 
} 

です。

データなしでエラーメッセージを表示するために同じdivを使用する場合は、同じ方法でこれを行うことができます。データはエラーとして解釈されないことを理解することが重要です。したがってloadErrorの代わりにloadCompleteが呼び出されます。 loadCompleteコールバックの内部では、loadErrorの内部に表示できるように、行の合計数（）または現在のページの行数（$(this).jqGrid("getGridParam", "reccount")）を調べて、カスタムメッセージを同じ方法で表示できます。

更新：私は（the commitを参照）エラーのdivで作業を簡素化するためのGitHub上の最新のコードに新しい方法displayErrorMessageを追加しました。 The demoは、新しいメソッドを使用してloadErrorのコードを1行に縮小されています

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