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

Question

我有以下 kendo 网格：

$("#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 object 进行填充。我怎样才能告诉它只使用 object 中的 customerContact 属性？

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

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

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

Answer 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
            }]
        });