如何将 JSON 数据与 Kendo Grid 绑定

Posted 2023-05-07

【中文标题】如何将 JSON 数据与 Kendo Grid 绑定

【英文标题】：How to bind JSON data with Kendo Grid

【发布时间】：2014-03-21 09:24:01

【问题描述】：

使用我的 WCF 服务我正在公开 JSON 数据：

 [OperationContract]
 [WebGet(ResponseFormat=WebMessageFormat.Json)]
 List<ProductDetails> GetProductDetails();

这里是返回的 JSON 示例：

"d":["__type":"ProductDetails:#NWProducts","Discount":0,"OrderId":10248,"ProductId":11,"UnitPrice":14.0000,"quantity":12 ,"__type":"ProductDetails:#NWProducts","Discount":0,"OrderId":10248,"ProductId":42,"UnitPrice":9.8000,"quantity":10,"__type": "ProductDetails:#NWProducts","Discount":0,"OrderId":10248,"ProductId":72,"UnitPrice":34.8000,"quantity":5,"__type":"ProductDetails:#NWProducts", "Discount":0,"OrderId":10249,"ProductId":14,"UnitPrice":18.6000,"quantity":9,"__type":"ProductDetails:#NWProducts","Discount":0," OrderId":10249,"ProductId":51,"UnitPrice":42.4000,"quantity":40

尝试使用以下方法将其绑定到 Kendo Grid：

   <script>
                $(document).ready(function () 
                    $("#grid").kendoGrid(
                        dataSource: 
                            type: "json",
                            transport: 
                                read: "http://localhost/KendoServices/Web/GetProductDetails"
                            ,
                            pageSize: 10
                        ,
                        groupable: true,
                        sortable: true,
                        pageable: 
                            refresh: true,
                            pageSizes: true,
                            buttonCount: 5
                        ,
                        columns: [
                            field: "OrderId",
                            title: "OrderId",
                            width: 140
                        , 
                            field: "ProductId",
                            title: "ProductId",
                            width: 190
                        , 
                            field: "UnitPrice",
                            title: "UnitPrice"
                        , 
                            field: "quanity",
                            width: 110
                        ]
                    );
                );
            </script>

由于某种原因，我无法在网格上看到任何数据。我尝试绑定数据的方式可能有问题。

【问题讨论】：

只是一个报价...尝试添加ServerOperation:false

【参考方案1】：

生成的 JSON 是这里的罪魁祸首。默认情况下，kendo 数据源会查找返回对象以在名为 results 的数组中包含项目。很容易修复。只需要定义数据在响应 JSON 对象中的位置。

dataSource: 
    transport: 
        read: 
             url: "http://localhost/KendoServices/Web/GetProductDetails",
             dataType: 'json'
        
    ,
    pageSize: 10,
    schema: 
        data: function(response) 
            return response.d;
        
    
,

--编辑... 哎呀，漏掉了别的东西。您的 type: 'json' 应该在您的读取对象内，并且应该是 dataType: 'json'

【讨论】：

还是一样，网格上看不到任何数据

如果您停止返回 response.d 并检查响应对象，它是否在某处包含所有 JSON？

无法在 response.d 处获得断点，但可以签入 Fiddler 我正在 JSON 中获取所有内容

你的意思是在传输对象内部，如果需要在内部读取，你能用代码更新答案吗？

抱歉，我今天早上没玩游戏。修复了transport.read，它应该是一个带有url和dataType属性的对象。

【参考方案2】：

试试这个

dataSource: 
    transport: 
            read: 
                   url: "http://localhost/KendoServices/Web/GetProductDetails",
                   contentType: 'application/json; charset=utf-8',
                   dataType: "json"
                  
    ,
    schema: 
                 data: "d"
            
    

【参考方案3】：

这就是我的做法：

    $("#grid").kendoGrid(
        dataSource:                
            transport: 
                    read:  
                            url : pUrl,
                            dataType: "json"
                    
            ,
            pageSize:40,                
            schema: 
                data: function(response) 
                    return response.json;
                
                           

        ,
        height: 550,
        groupable: false,
        sortable: true,
        pageable: 
            refresh: false,
            pageSizes: false,
            buttonCount: 5
        ,
        columns: [
            
                field: "SEQ_NO",
                title: "No",
                filterable: false,
                width: 120
            , 
                field: "LOT_NO",
                title: "Lot No (INS' No)"
            , 
                field: "TYPE",
                title: "INPUT (At 100% Burden)"
            , 
                field: "ATTRIBUTE01",
                title: "1.0 In"
            , 
                field: "ATTRIBUTE02",
                title: "2.0 In"
            , 
                field: "ATTRIBUTE03",
                title: "0.05 In"
            , 
                   field: "RESILT",
                   title: "RESILT"
            
        ]
    );

【讨论】：

不鼓励外部链接到图片。