kendo-ui - 编辑或创建 Kendo Grid 条目时检测服务器端错误

Question

我有一个可编辑的 Kendo Grid 来管理(创建/修改)用户帐户。编辑是在弹出窗口中完成的(而不是内联或批量)。我有客户端验证来帮助确保向服务器提供有效数据，但是我无法弄清楚在创建/更新服务器端失败的情况下如何处理服务器的响应。我说的不是“失败”，例如请求失败，返回 HTTP 404 或 500；我说的是失败，因为服务器上的脚本不喜欢有关数据的某些内容并拒绝提供服务。

有人可以告诉我如何实现这一目标吗？我希望能够做的是将更新发送到服务器后，等待响应。如果回复说一切正常，那就太好了。如果回复说事情进展不太顺利，我希望能够 (A) 保持弹出编辑窗口打开并填充，以及 (B) 向用户提供有关拒绝原因的反馈。除非响应表明一切正常，否则不应将数据提交到网格。同样，编辑弹出窗口应保持打开状态，直到服务器说“确定”。

我对服务器响应的格式很灵活，只要我能完成我想要的。

在您引导我查看 Kendo 官方 API 文档之前，我已经对其非常了解并每天都会引用它。然而，至少可以说，它是不完整的，我找不到与该主题相关的任何内容。如果您在文档中找到了您认为可以帮助我的内容，那么请务必指出我的文档 =)

根据要求，下面是我用于创建网格的代码。

$("#kendo_user_grid").kendoGrid({
    columns: [{
        title: "Last name",
        field: "lName"
    },{
        title: "First name",
        field: "fName"
    },{
        title: "Business unit",
        field: "businessUnit"
    },{
        title: "Username",
        field: "loginId"
    },{
        title: "Email address",
        field: "email"
    },{
        title: "Phone",
        field: "phone"
    },{
        title: "Address",
        field: "address"
    },{
        title: "City",
        field: "city"
    },{
        title: "State",
        field: "state"
    },{
        title: "Zip code",
        field: "zipcode"
    },{
        title: "Country",
        field: "country"
    },{
        title: "Time zone",
        field: "timezone"
    },{
        title: "Privileges",
        field: "privs"
    },{
        command: ["edit","destroy"],
        title: " "
    }],
    scrollable: false,
    dataSource: {
        transport: {
            read: {
                url: "manageUsers.phtml",
                data: { mode: "fetch" },
                dataType: "json",
                type: "POST"
            },
            update: {
                url: "manageUsers.phtml",
                data: { mode: "update" },
                type: "POST"
            },
            destroy: {
                url: "manageUsers.phtml",
                data: { mode: "destroy" },
                type: "POST"
            },
            create: {
                url: "manageUsers.phtml",
                data: { mode: "create" },
                type: "POST"
            },
            batch: false
        },
        schema: {
            data: "records",
            total: "total",
            model: {
                id: "userId",
                fields: {
                    userId: { editable: false, nullable: true },
                    lName: { type: "string", editable: true, validation: { required: true } },
                    fName: { type: "string", editable: true, validation: { required: true } },
                    businessUnit: { type: "string", editable: true, validation: { required: true } },
                    loginId: { type: "string", validation: { required: true } },
                    email: { type: "string", validation: { required: true } },
                    phone: { type: "string" },
                    address: { type: "string" },
                    city: { type: "string" },
                    state: { type: "string" },
                    zipcode: { type: "string" },
                    country: { type: "string" },
                    timezone: { type: "string" },
                    privs: { type: "string" }
                }
            }
        },
        pageSize: 20,
        serverPaging: false,
        serverFiltering: false,
        serverSorting: false
    },
    filterable: true,
    sortable: true,
    pageable: true,
    editable: {
        mode: "popup",
        template: kendo.template($("#kendo_edit_user_template").html())
    },
    toolbar: ["create","save","cancel"]
});

Answer 1

有两点需要记住:

1. Schema.errors服务器响应中包含服务器端错误的字段。
2. error是一个如果出现错误就会触发的事件。

基本上你需要:

1. 向您的架构添加一个 errors 定义，以提供对从服务器发回的状态的访问。
2. 实现 error 事件处理程序，例如恢复以前的值。

如果您的服务器在名为 myError 的字段中返回错误消息，那么您将看到如下内容:

schema: {
    errors: "myError", 
    data: "records",
    total: "total",
    model: {
        id: "userId",
        fields: {
            userId: { editable: false, nullable: true },
            lName: { type: "string", editable: true, validation: { required: true } },
            fName: { type: "string", editable: true, validation: { required: true } },
    ...

或者:

schema: {
    errors: function(response) {
        if (response.myError && response.myError !== "OK") {
            return response.myError;
        }
        return false;
    }, 
    data: "records",
    total: "total",
    model: {
        id: "userId",
        fields: {
            userId: { editable: false, nullable: true },
            lName: { type: "string", editable: true, validation: { required: true } },
            fName: { type: "string", editable: true, validation: { required: true } },
    ...

事件将是:

dataSource: {
    error : function (e) {
        if (e.errors !== false) {
            alert("Error: " + e.errors);
            // This will cancel any change done
            this.cancelChanges();
        }
    },
    transport: {
        read: {
            url: "manageUsers.phtml",
            data: { mode: "fetch" },
            dataType: "json",
            type: "POST"
        },

编辑:如果您想要保持弹出窗口打开，您应该这样做:

dataSource: {
    error : function (e) {
        if (e.errors !== false) {
            alert("Error: " + e.errors);
            // This will keep the popup open
            grid.one("dataBinding", function (e) {
                e.preventDefault();   // cancel grid rebind
            });
        }
    },
    transport: {
        read: {
            url: "manageUsers.phtml",
            data: { mode: "fetch" },
            dataType: "json",
            type: "POST"
        },

我使用 jQuery.one 绑定(bind)到数据绑定(bind)事件一次