Question

我正在尝试熟悉kendo ui dataSource，我以前从未使用过JSON并使用您的文档构建了以下内容：

HTML：

<!doctype html>
<html>
    <head>
        <title>Kendo UI Web</title>
        <link href="styles/kendo.common.min.css" rel="stylesheet" />
        <link href="styles/kendo.default.min.css" rel="stylesheet" />
        <script src="js/jquery.min.js"></script>
        <script src="js/kendo.web.min.js"></script>
    </head>
    <body>
        <div id="grid"></div>
        <script>
        $(document).ready(function () {
            var myDataSource = new kendo.data.DataSource({
                transport: {
                    read: {
                        url: "people.json",
                        dataType: "json"
                    }
                }
            });

            $("#grid").kendoGrid({
                dataSource: myDataSource,
                    columns: [
                    {
                        field: "firstName",
                        title: "First Name"
                    },
                    {
                        field: "lastName",
                        title: "Last Name"
                }]
            });

        });

    </script>
    </body>
</html>

Json文件：

{
    "people": [
        { "firstName":"John" , "lastName":"Doe" },
        { "firstName":"Anna" , "lastName":"Smith" },
        { "firstName":"Peter" , "lastName":"Jones" }
    ]
}

网格没有加载任何数据，我看到的只是标题。

我使用简单的HTML和JSON文件试过这个，我也在Visual Studio中尝试了这个。

任何帮助将不胜感激

Answer 1

在您的JSON中，传输的数据不是array而是object，因此您需要指定数据存储在该对象中的哪个位置，从而使KendoUI DataSource能够找到它。这是使用schema.data

指定的

您的数据源应该是：

var myDataSource = new kendo.data.DataSource({
    transport: {
        read: {
            url     : "people.json",
            dataType: "json"
        }
    },
    schema   : {
        data: "people"
    }
});

简单的Json连接无法正常工作

1 个答案: