Kendo UI网格未填充JSON数据

时间:2015-01-06 14:50:25

标签: json kendo-ui kendo-grid

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

我怀疑它与我的相关json数据前面的'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: "&nbsp;", width: "250px" }],
                        editable: "popup"
                    });
                });
        </script>
        </div>
    </body>
</html>

1 个答案:

答案 0 :(得分:0)

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

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

请参阅工作示例http://jsbin.com/vevixa/1/edit?html,js,console,output