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

Posted 2023-05-08

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

【英文标题】：How to use a property within the server's JSON response object (instead of full object) to populate a Kendo grid?

【发布时间】：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 来填充标题？

【参考方案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
            ]
        );