此Kendo-UI数据源和Kendo-UI网格的JSON响应应该是什么样的

Question

我无法弄清楚应该如何为Kendo-UI网格控制和数据源设置来自服务器的JSON响应，同时还要保持模型的验证性。

这是我下面的网格代码。

<div id="grid"></div>
<script>
    var crudServiceBaseUrl = "/api",
    dataSource = new kendo.data.DataSource({
        transport: {
            read:  {
                url: crudServiceBaseUrl + "/companies",
                dataType: "json",
                type: "POST"
            },
            update: {
                url: crudServiceBaseUrl + "/companies/update",
                dataType: "json",
                type: "POST"
            },
            destroy: {
                url: crudServiceBaseUrl + "/companies/destroy",
                dataType: "json",
                type: "POST"
            },
            create: {
                url: crudServiceBaseUrl + "/companies/create",
                dataType: "json",
                type: "POST"
            },
            parameterMap: function(options, operation) {
                if (operation !== "read" && options.models) {
                    return {models: kendo.stringify(options.models)};
                }
            }
        },
        error: function (e) {
            /* the e event argument will represent the following object:

            {
                errorThrown: "Unauthorized",
                sender: {... the Kendo UI DataSource instance ...}
                status: "error"
                xhr: {... the Ajax request object ...}
            }

            */
            //alert("Status: " + e.status + "; Error message: " + e.errorThrown);
            console.log("Status: " + e.status + "; Error message: " + e.errorThrown);
        },
        autoSync: true,
        serverPaging: true,
        serverFiltering: true,
        serverSorting: true,
        pageSize: 20,
        selectable: "multiple cell",
        allowCopy: true,
        columnResizeHandleWidth: 6,
        schema: {
            total: "itemCount",
            //data: "items",
            model: {
                id: "CompanyID",
                fields: {
                    CompanyID: { editable: false, nullable: true },
                    Name: { validation: { required: true } },
                    Phone: { type: "string" },
                    Email: { type: "string" }
                }
            }
        }
    });

    $("#grid").kendoGrid({
        dataSource: dataSource,
        height: 550,
        groupable: true,
        sortable: {
            mode: "multiple",
            allowUnsort: true
        },
        toolbar: ["create"],
        pageable: {
            refresh: true,
            pageSizes: true,
            buttonCount: 5
        },
        reorderable: true,
        resizable: true,
        columnMenu: true,
        filterable: true,
        columns: [
            { field: "name", title: "Company Name" },
            { field: "phone", title:"Phone" },
            { field: "email", title:"Email" },
            { command: ["edit", "destroy"], title: "Operations", width: "240px" }
        ],
        editable: "popup"
    });
</script>



<div id="grid"></div>
<script>
    var crudServiceBaseUrl = "/api",
    dataSource = new kendo.data.DataSource({
        transport: {
            read:  {
                url: crudServiceBaseUrl + "/companies",
                dataType: "json",
                type: "POST"
            },
            update: {
                url: crudServiceBaseUrl + "/companies/update",
                dataType: "json",
                type: "POST"
            },
            destroy: {
                url: crudServiceBaseUrl + "/companies/destroy",
                dataType: "json",
                type: "POST"
            },
            create: {
                url: crudServiceBaseUrl + "/companies/create",
                dataType: "json",
                type: "POST"
            },
            parameterMap: function(options, operation) {
                if (operation !== "read" && options.models) {
                    return {models: kendo.stringify(options.models)};
                }
            }
        },
        error: function (e) {
            /* the e event argument will represent the following object:

            {
                errorThrown: "Unauthorized",
                sender: {... the Kendo UI DataSource instance ...}
                status: "error"
                xhr: {... the Ajax request object ...}
            }

            */
            //alert("Status: " + e.status + "; Error message: " + e.errorThrown);
            console.log("Status: " + e.status + "; Error message: " + e.errorThrown);
        },
        autoSync: true,
        serverPaging: true,
        serverFiltering: true,
        serverSorting: true,
        pageSize: 20,
        selectable: "multiple cell",
        allowCopy: true,
        columnResizeHandleWidth: 6,
        schema: {
            total: "itemCount",
            //data: "items",
            model: {
                id: "CompanyID",
                fields: {
                    CompanyID: { editable: false, nullable: true },
                    Name: { validation: { required: true } },
                    Phone: { type: "string" },
                    Email: { type: "string" }
                }
            }
        }
    });

    $("#grid").kendoGrid({
        dataSource: dataSource,
        height: 550,
        groupable: true,
        sortable: {
            mode: "multiple",
            allowUnsort: true
        },
        toolbar: ["create"],
        pageable: {
            refresh: true,
            pageSizes: true,
            buttonCount: 5
        },
        reorderable: true,
        resizable: true,
        columnMenu: true,
        filterable: true,
        columns: [
            { field: "name", title: "Company Name" },
            { field: "phone", title:"Phone" },
            { field: "email", title:"Email" },
            { command: ["edit", "destroy"], title: "Operations", width: "240px" }
        ],
        editable: "popup"
    });
</script>

您将在代码中注释掉//data: "items"模式中的//data: "items"的代码，如果我取消注释，则Kendo-UI Grid会填充数据...但是，我认为我做错了，因为然后进行验证规则似乎不适用于数据。

例如，我可以告诉我，因为我正在网格上使用“弹出”类型编辑，但看不到所需的工作方式，并且如果将模型类型之一更改为布尔值或数字，则看不到复选框出现或数字选择器。

我的JSON格式应如何寻找类似提供的模式？

我当前的JSON响应如下所示。 我在那里有itemCount，因为我正在做serverPaging，serverFiltering和serverSorting。

{"itemCount":"7","items":[{"name":"Joe","phone":"(714)333-8650","email":"fake@gmail.com"},{"name":"Rachel","phone":"(562)810-4382","email":"rachel@yahoo.com"},{"name":"John","phone":"(562)810-4382","email":"John@yahoo.com"},{"name":"Richard","phone":"(562)810-4382","email":"Richard@yahoo.com"},{"name":"Sister","phone":"(562)810-4382","email":"Sister@yahoo.com"},{"name":"Brother","phone":"(562)810-4382","email":"Brother@yahoo.com"},{"name":"Sibling","phone":"(562)810-4382","email":"Sibling@yahoo.com"}]}

Answer 1

好的，看起来我只是瞎子，原来是区分大小写的……一旦我将模式更改为以下内容，验证就开始起作用。 json中的名称，电话和电子邮件均为小写字母，因此，如果您的json响应是这种方式，那么这里的课程就是在架构定义中将其保持小写字母。

schema: {
            total: "itemCount",
            data: "items",
            model: {
                id: "id",
                fields: {
                    id: { editable: false, nullable: true },
                    name: { validation: { required: true } },
                    phone: { type: "string" },
                    email: { type: "string" }
                }
            }
        }