c# - 如何使用 Kendo Grid 绑定(bind) JSON 数据

Question

使用我的 WCF 服务公开 JSON 数据:

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

这是返回的 JSON 示例:

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

尝试使用以下方法将其绑定(bind)到 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>

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

Answer 1

生成的 JSON 是这里的罪魁祸首。默认情况下，kendo dataSource 查找返回对象以在名为结果的数组中包含项目。易于修复。只需要定义数据在响应 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'