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

同样，您可以根据从jqXHR回调转发到textStatus的{{1}}，errorThrown，loadError参数显示任何其他错误文本jQuery.ajax。

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

更新：我在GitHub上的最新代码中添加了新方法loadError，以简化错误div的使用（请参阅the commit）。 The demo使用新方法，displayErrorMessage的代码缩减为一行：

loadError

Jqgrid如何添加自定义自定义错误以显示在表中

1 个答案: