jqgrid 服务器端错误消息/验证处理

Question

在我的 json 响应中，我有 'STATUS' 和 'errors' 属性。 如何在 jqGRid 中使用此错误属性。解析所有错误并在对话框中显示它们。

基本上只是检查，如果 status:'ERROR' 则显示所有错误。

谢谢！

Answer 1

在the answer 的最后一部分中，我已经尝试过就您当前的问题给出答案。可能我表达的不够清楚。

您不应该在标准成功响应中放置错误信息。您应该只遵循用于服务器和客户端之间通信的 HTTP 协议的主要规则。

网格中的数据加载、行的编辑以及与服务器的所有 Ajax 通信都是根据 HTTP 协议实现的。每个 HTTP 响应在响应的第一行都有状态码。理解这个意思很重要。

典型的 JSON 数据成功请求如下所示

HTTP/1.1 200 OK
...
Content-Type: application/json
...

{"page":"1",....}

如果尝试加载的 URL 不存在，例如服务器响应的第一行将是

HTTP/1.1 404 Not Found

和 jqGrid 基于 HTTP 状态码（在这种情况下为 404）*不会尝试将服务器响应解释为包含网格内容数据的数据。

The demo有如下代码

$("#list").jqGrid({
    url: 'Unknown.json', // there are no file with the name
    datatype: 'json',
    // ... some other typical parameters
    loadComplete: function () {
        alert("OK");
    },
    loadError: function (jqXHR, textStatus, errorThrown) {
        alert('HTTP status code: ' + jqXHR.status + '\n' +
              'textStatus: ' + textStatus + '\n' +
              'errorThrown: ' + errorThrown);
        alert('HTTP message body (jqXHR.responseText): ' + '\n' + jqXHR.responseText);
    }
});

显示如下警告消息：

此外，在jqXHR.responseText 中，您会发现服务器响应的完整正文 为字符串。下一个警报会显示响应。

通过以上所有信息，我想向您展示错误响应和成功响应将由您使用的整个软件堆栈以另一种方式处理（jqGrid、jQuery、XMLHttpRequest object，...）。因此，如果检测到错误，您应该在服务器响应中使用error HTTP status codes。例如，在the answer 中，您将看到如何在使用 ASP.NET MVC 的情况下执行此操作。

Here你可以找到另一个版本的loadError实现等待JSON格式的输入：{"Source":"some error source",Message:"Description of the error"}，错误输出会像这里

但是代码可以额外显示由您的网络服务器生成的 HTML 响应：

您可以根据自己的目的轻松修改代码。您可以在下面找到代码

loadComplete: function () {
    // remove error div if exist
    $('#' + this.id + '_err').remove();
},
loadError: function (jqXHR, textStatus, errorThrown) {
    // remove error div if exist
    $('#' + this.id + '_err').remove();

    // insert div with the error description before the grid
    $(this).closest('div.ui-jqgrid').before(
        '<div id="' + this.id + '_err" style="max-width:' + this.style.width +
            ';"><div class="ui-state-error ui-corner-all" style="padding:0.7em;float:left;">' +
            decodeErrorMessage(jqXHR, textStatus, errorThrown) +
            '</div><div style="clear:left"/></div>'
    );
}

decodeErrorMessage 函数定义为

var decodeErrorMessage = function (jqXHR, textStatus, errorThrown) {
        var htmlBody, errorInfo, i, errorText = '',
            errorIconSpan = '<span class="ui-icon ui-icon-alert" style="float:left; display: inline-block; margin-right: .3em;"></span>';
        if (textStatus) {
            errorText = textStatus;
        }
        if (errorThrown) {
            if (errorText.length > 0) {
                errorText += '<hr/>';
            }
            errorText += errorThrown;
        }
        if (typeof (jqXHR.responseText) === "string") {
            if (jqXHR.responseText.charAt(0) === '[') {
                try {
                    errorInfo = $.parseJSON(jqXHR.responseText);
                    errorText = "";
                    for (i = 0; i < errorInfo.length; i += 1) {
                        if (errorText.length !== 0) {
                            errorText += "<hr/>";
                        }
                        errorText += errorInfo[i].Source + ": " + errorInfo[i].Message;
                    }
                } catch (e) { }
                errorText = errorIconSpan + errorText;
            } else {
                htmlBody = /<body.*?>([\s\S]*)<\/body>/i.exec(jqXHR.responseText);
                if (htmlBody !== null && htmlBody.length > 1) {
                    errorText = htmlBody[1];
                }
            }
        } else {
            errorText = errorIconSpan + errorText;
        }
        return '<div style="float:left">' + errorText + '</div>';
    };

更新：Free jqGrid 包含loadError 的默认实现（参见here 和here），如果大多数 Ajax 错误。它在错误 div 中显示结果文本，存在于网格主体上方。因此建议在使用自定义loadError 之前测试默认行为是否产生好的结果。如果你真的需要创建自己的loadError，那么你可以使用free jqGrid的displayErrorMessage方法将错误信息放在错误div中：$("#grid").jqGrid("displayErrorMessage", customErrorMessage);

Answer 2

要执行您所描述的操作，最简单的方法是将自定义属性添加到 jqgrid 从服务器检索的 data json 对象。然后，您可以使用 loadComplete(data) 事件捕获这些自定义属性。

jQuery('#grid').jqGrid({
    loadComplete: function (data) {
        //access data.propertyname here
    }
});