Kendo UI 网格未填充 JSON 数据

Question

我无法让我的 Kendo UI 网格填充我的 JSON 数据。

我怀疑它与我相关 json 数据前面的 'the double' 数据部分有关。我不确定如何在我的架构中添加双数据标记。任何帮助将不胜感激。

JSON:

{"dsProduct": 
{"ttProduct":
[{"ProductId":"Truck","ProductType":5,"Tradeable":true},{"ProductId":"Tractor","ProductType":5,"Tradeable":false}]
}
}

JavaScript/HTML代码：

<!doctype html>
<html>
    <head>
        <title>Kendo Grid with json</title>
        <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
        <script src="http://cdn.kendostatic.com/2014.3.1119/js/kendo.all.min.js"></script>
        <link href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.common.min.css" rel="stylesheet" />
        <link href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.rtl.min.css" rel="stylesheet" />
        <link href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.silver.min.css" rel="stylesheet" />

    </head>
    <body>
        <div id="example">
        <div id="grid"></div>
            <script>
                $(document).ready(function () {
                    var crudServiceBaseUrl = "http://localhost:8810/Kendo/rest/KendoRest",
                        dataSource = new kendo.data.DataSource({
                            transport: {

                                read:  {
                                    url: crudServiceBaseUrl + "/Products",
                                    type: "GET",
                                    dataType: "json",
                                    contentType: "application/json; charset=utf-8"
                                },
                            },
                            batch: true,
                            pageSize: 20,
                            schema: {
                                data:  
                                    "dsProduct",

                                model: {

                                    id: "ProductId",
                                    fields: {
                                        ProductId: { type: "string" },
                                        ProductType: { type: "number" },
                                        Tradeable: { type: "boolean" }
                                    }
                                }
                            }
                        });

                    $("#grid").kendoGrid({
                        dataSource: dataSource,
                        pageable: true,
                        height: 550,
                        toolbar: ["create"],
                        columns: [
                            { field: "ProductId", title: "Product Name" },
                            { field: "ProductType", title:"Product Type", width: "120px" },
                            { field: "Tradeable", title:"Can product be traded?", width: "120px" },
                            { command: ["edit", "destroy"], title: " ", width: "250px" }],
                        editable: "popup"
                    });
                });
        </script>
        </div>
    </body>
</html>

Answer 1

您对 shema.data 的定义不太正确。查看您的 json，在包含数组的 dsProduct 下有一个子对象。将您的数据更改为 dsProduct.ttProduct，它应该可以工作。

schema: {
      data:  
      "dsProduct.ttProduct",
      model: {

查看工作示例 http://jsbin.com/vevixa/1/edit?html,js,console,output

Kendo UI 网格未填充 JSON 数据

Kendo UI grid is not populated with JSON data

json

kendo-ui

kendo-grid