Jqgrid如何添加自定义自定义错误显示在table

Question

如果没有数据或未找到数据，我如何添加自定义错误消息以在 jqgrid table 中显示可以吗？

这是我的代码吹和屏幕抓取

代码

  <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 for example shows how it could be used. The main problem was that it was no default implementation of the callback fill jqGrid 4.12.1 (see here)。因此，如果加载失败，用户可能会看到一些错误消息。

另一方面我看到newdiv.ui-jqgrid-errorbar和SPANspan.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);
    }
}

以同样的方式，您可以根据从 [=20= 转发到 loadError 的 jqXHR、textStatus、errorThrown 参数显示任何其他错误文本] jQuery.ajax.

的回调

如果您想使用相同的 div 来显示无数据时的错误消息，您可以用相同的方式执行此操作。重要的是要了解没有数据不会被解释为错误。因此 loadComplete 而不是 loadError 将被调用。在 loadComplete 回调中，您仍然可以检查总行数 ($(this).jqGrid("getGridParam", "records")) 或当前页面上的行数 ($(this).jqGrid("getGridParam", "reccount")) 并在同一页面中显示您的自定义消息就像您可以在 loadError 中显示它一样。

更新： 我在 GitHub 上的最新代码中添加了新方法 displayErrorMessage 以简化错误 div 的处理（参见 the commit). The demo使用新方法，loadError的代码减少到一行：

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

Jqgrid如何添加自定义自定义错误显示在table

Jqgrid how to add custom custom error to display in table

jquery

jqgrid