此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" }
                }
            }
        }