Question

我正在尝试学习Kendo UI和jQuery。我一直关注Kendo UI网站上的视频，了解数据源和绑定等。我正在尝试使用自己的JSON数据，但它并没有真正发挥作用。

我复制了视频中的内容，但我无法显示数据。我得到的只是格式化的表格。

我的HTML：

<!DOCTYPE html>
<html>
<head>
    <title>Shows</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="example">

    <div id="shows-grid">
        <table id="shows">
            <tr>
                <th data-field="name">Show Title</th>
                <th data-field="season">Total Seasons</th>
                <th data-field="id">Rage TV ID</th>
            </tr>
        </table>
    </div>
</div>    
    <script>
        $(function() {
            dataSource = new kendo.data.DataSource({
                transport: {
                    read: {
                        url: "include/shows.json"
                    }
                }
            });

            $("#shows").kendoGrid({
                dataSource:dataSource
            });
        });
    </script>

</body>
</html>

我的JSON数据：

{"data":[
    {"id":"4628","name":"NCIS","season":"11"},
    {"id":"21934","name":"NCIS: Los Angeles","season":"5"},
    {"id":"24591","name":"The Real NCIS","season":"1"},
    {"id":"34498","name":"NCIS: Red","season":"1"},
    {"id":"38017","name":"NCIS: New Orleans","season":"1"},
    {"id":"3039","name":"Charmed","season":"8"},
    {"id":"6125","name":"The Real World","season":"28"},
    {"id":"32724","name":"Da Vinci's Demons","season":"2"},
    {"id":"27924","name":"The Franchise","season":"2"},
    {"id":"6218","name":"The Streets of San Francisco","season":"5"},
    {"id":"3253","name":"Da Vinci's Inquest","season":"7"},
    {"id":"6862","name":"Da Vinci's City Hall","season":"1"},
    {"id":"32034","name":"Oddities: San Francisco","season":"2"},
    {"id":"14884","name":"San Francisco International Airport","season":"1"},
    {"id":"2616","name":"Animal Cops: San Francisco","season":"1"},
    {"id":"5208","name":"Sir Francis Drake","season":"1"},
    {"id":"29590","name":"Easy Chinese","season":"2"},
    {"id":"5583","name":"The Arlene Francis Show","season":"1"},
    {"id":"26665","name":"Jancis Robinson's Wine Course","season":"1"},
    {"id":"17968","name":"Foul Play","season":"1"}
    ]}

Answer 1

您似乎在初始化脚本中遗漏了架构和列属性。

以下是您可以做的事情的示例：

$("#shows").kendoGrid({
                dataSource: {
                    transport: {
                        read: "include/shows.json"
                    },
                    schema: {
                        model: {
                            id: "IssueId",
                            fields: {
                                id: { editable: false, nullable: false },
                                name: { validation: { required: true } },
                                season: { validation: { required: true } }
                            }
                        }
                    }
                },
                columns: [
                            { field: "name", title: "Name" },
                            { field: "season", title: "Season" }
                        ]
                    });

Kendo UI网格示例不起作用

1 个答案: