如何使用服务器的 JSON 响应对象（而不是完整对象）中的属性来填充 Kendo 网格？答案

【问题标题】：How to use a property within the server's JSON response object (instead of full object) to populate a Kendo grid?如何使用服务器的 JSON 响应对象（而不是完整对象）中的属性来填充 Kendo 网格？
【发布时间】：2021-10-14 06:14:39
【问题描述】：

我有以下剑道网格：

$("#grid").kendoGrid({
                dataSource: {
                    transport: {
                        url: "customers",
                        type: "GET",
                        dataType: "json"
                    }
                },
                height: 550,
                columns: [{
                    field: "contactName",
                    title: "Contact Name",
                    width: 240
                }, {
                    field: "contactTitle",
                    title: "Contact Title"
                }, {
                    field: "companyName",
                    title: "Company Name"
                }, {
                    field: "country",
                    width: 150
                }]
            });

来自服务器的 JSON 响应如下所示：

{
   "date": "2020-02-02",
   "responseType": "customer contact",
   "customerContact": [{
        "contactName": "Bob Smith",
        "contactTitle": "Manager",
        "companyName": "Acme",
        "country": "Canada"
    },{ 
    //more customerContact data
   }]
}

网格正在尝试使用这个完整的 JSON 对象进行填充。如何告诉它只使用对象中的 customerContact 属性？

我还需要从响应中获取 date 和 responseType 以使用以下方法填充网格外的 HTML 元素：

$("#title").append('<h3>' + response.reponseType + ' at ' + date + '</h3>');

如何取出responseType 和date 来填充标题？

【问题讨论】：

标签： jquery json kendo-ui kendo-grid

【解决方案1】：

使用schema.data 属性表明您的数据不在响应根目录中。您可以使用requestEnd 事件直接访问响应，并填充您的标题元素。请参阅dataSource documentation 了解更多信息。

        $("#grid").kendoGrid({
            dataSource: {
                transport: {
                    url: "customers",
                    type: "GET",
                    dataType: "json"
                },
                schema: {
                    data: "customerContact"
                },
                requestEnd: function(e) {
                    if (e.type === "read" && e.response) {
                        $("#title").append('<h3>' + e.response.reponseType + ' at ' + e.response.date + '</h3>');
                    }
                }
            },
            height: 550,
            columns: [{
                field: "contactName",
                title: "Contact Name",
                width: 240
            }, {
                field: "contactTitle",
                title: "Contact Title"
            }, {
                field: "companyName",
                title: "Company Name"
            }, {
                field: "country",
                width: 150
            }]
        });

【讨论】：