将剑道网格与数据源绑定不显示数据

Posted 2023-05-07

技术标签:

【中文标题】将剑道网格与数据源绑定不显示数据【英文标题】：Binding Kendo grid with data source does not show data 【发布时间】：2014-04-04 19:27:34 【问题描述】：

我正在尝试使用以下参考资料学习剑道网格。

Grid / Binding to local data How to use SetDataSource Method of the Kendo UI Grid How-To: Use the DataSource How-To: Bind the Grid to Remote Data

我有一个名为“localDataSource”的数据源。网格需要显示来自该源的数据。我尝试在 kendoGrid 定义中定义dataSource: localDataSource。然后我尝试显式设置数据源grid.setDataSource(localDataSource);

尽管没有 javascript 错误，但这两种方法都没有呈现数据。这里缺少什么？

Fiddle

代码

<head>
    <title>Grid with DataSource</title>
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="http://cdn.kendostatic.com/2013.2.716/js/kendo.all.min.js"></script>


    <style type="text/css">
        table, th, td
        
            border: 1px solid black;
        
    </style>

</head>
<body>


        <div id="example" class="k-content">

            <div id="grid">
            AAAA
            </div>

            <script>
                $(document).ready(function () 

                    var products = [
                             title: "Nylon", year: 1977 ,
                             title: "Fabric Material", year: 1980 ,
                             title: "Yards UOM", year: 1983 
                          ];

                    var localDataSource = new kendo.data.DataSource( data: products );

                    //console.log(localDataSource);

                    $("#grid").kendoGrid(
                        dataSource: localDataSource,
                        height: 430,
                        columns: [
                                     field: "Title", title: "Title", format: "0:c", width: "130px" ,
                                     field: "Year", title: "Year", width: "130px" 
                                ]
                    );

                    var grid = $('#grid').data("kendoGrid");
                    grid.setDataSource(localDataSource);
                );
            </script>

        </div>


</body>

【问题讨论】：

【参考方案1】：

您对列的定义有误。字段选项区分大小写，您使用的是大写字母而不是小写字母。

columns: [
          field: "title", title: "Title", format: "0:c", width: "130px" ,
          field: "year", title: "Year", width: "130px" 
]

Fiddle

【讨论】：

【参考方案2】：

Kendo Grid - jsFiddle 为此提供了很好的示例代码 - 正是我想要的。

以下两种方法可行

var products = [
                             FirstName: "Nylon", LastName: 1977 ,
                             FirstName: "Yards", LastName: 1983 
                          ];

var localDataSource = new kendo.data.DataSource( data: products )

方法 1

          $("#grid").kendoGrid(
                   dataSource: localDataSource,
                   columns: [
                         field: "FirstName", title: "FirstName" ,
                         field: "LastName", title: "LastName" 
                            ]
                    );

方法 2

    var grid = $("#grid").kendoGrid(
    dataSource: localDataSource,
    columns: [
        field: "FirstName", title: "First Name",
        field: "LastName",title: "Last Name"
             ]    
).data("kendoGrid");

fiddle 1 和 fiddle 2

【讨论】：

以上是关于将剑道网格与数据源绑定不显示数据的主要内容，如果未能解决你的问题，请参考以下文章