如何使用Kendo Grid綁定JSON數據

Question

使用MY WCF服務我公開JSON數據：

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

以下是返回的JSON示例：

{ “d”：[{ “__類型”： “產品詳細：#NWProducts”， “折扣”：0 “的OrderId”：10248 “產品編號”：11， “單價”：14.0000 “控管數量”：12}，{ “__type”： “產品詳細：#NWProducts”， “折扣”：0 “的OrderId”：10248 “產品編號”：42， “單價”：9.8000 “控管數量”：10}，{ “__類型”：“產品詳細： #NWProducts”， “折扣”：0 “的OrderId”：10248 “產品編號”：72， “單價”：34.8000 “控管數量”：5}，{ “__類型”： “產品詳細：#NWProducts”， “折扣” ：0 “的OrderId”：10249 “產品編號”：14， “單價”：18.6000 “控管數量”：9}，{ “__類型”： “產品詳細：#NWProducts”， “折扣”：0 “的OrderId”： 10249 “產品編號”：51， “單價”：42.4000 “控管數量”：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>

出於某種原因，我無法在網格上看到任何數據。 我試圖綁定數據的方式可能有問題。

Answer 1

由此產生的JSON是罪魁禍首。 默認情況下，kendo dataSource查找返回對象以使數組中的項稱為results。 很容易修復。 只需要定義響應JSON對象中數據的位置。

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

- 編輯......哎呀，錯過了別的什么。 你的type: 'json'應該在你的read對象里面，應該是dataType: 'json'

Answer 2

嘗試這個

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

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