5

我有一个可编辑的 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: " "
    }],
    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"]
});
4

1 回答 1

15

有两点要记住：

  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绑定到数据绑定事件一次

于 2013-08-01T17:38:02.787 回答