Question

我有一个可编辑的Kendo Grid来管理（创建/修改）用户帐户。编辑是在弹出窗口中完成的（与内联或批处理相比）。我有客户端验证以帮助确保向服务器提供有效数据，但是如果创建/更新在服务器端失败，我无法弄清楚如何处理来自服务器的响应。我不是说'失败'，因为请求失败了，例如HTTP 404或500;我正在谈论失败，因为服务器上的脚本不喜欢有关数据的内容而拒绝承担责任。

有人可以告诉我如何才能做到这一点吗？我希望能够做的是将更新发送到服务器后，等待响应。如果回复说一切都好，那就好了。如果响应说某些事情没有那么顺利，我希望能够（A）保持弹出编辑窗口打开和填充，以及（B）向用户提供关于拒绝原因的反馈。除非响应表明一切正常，否则不应将数据提交到网格。同样，编辑弹出窗口应保持打开状态，直到服务器显示OK。

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

在您将我引导至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: "&nbsp;"
    }],
    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

要记住两点：

Schema.errors服务器响应中包含服务器端错误的字段。
error是一个在发生错误时将被触发的事件。

基本上你需要：

为您的架构添加errors定义，以便访问从服务器发回的状态。
实施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

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

1 个答案: