将kendo ui网格绑定到json文件，而不用在代码中生成网格 [英] Binding a kendo ui grid to a json file without generating the grid in code

问题描述

我发现的所有示例都是在代码中创建网格时使用的。

将dataSource单独放在作用域中还是放在选项中是相同的？

如果我将myDataSrc设置为代码中的简单数组，则绑定起作用。但是作为文件中的kendo.data.DataSource，它不会。

 < div kendo-grid k- options =optionsk-data-source =myDataSrc>< / div> 
 
 $ b $ scope.myDataSrc = new kendo.data.DataSource（{
 transport：{
 read：{
 url：test.json ，
 dataType：json
} 
} 
}）; 
 
 $ scope.options = {
 sortable：true，
 pageable：true，
列：[{
 field：firstName，
 title：First Name
}，{
 field：lastName，
 title：Last Name
 
}，{
字段：country
}，{
字段：City
}，{
字段：标题
}] 
}; 
 
 
 $ b {firstName：John，lastName：Doe，country：country1}，
 {firstName ：Anna，lastName：Smith，country：country2}，
 {firstName：Peter，lastName：Jones，country：country3 } 
] 
  

谢谢！

解决方案

这终于为我工作：

 < div kendo-grid k -options = 选项 >< / DIV> 
 
 
 $ scope.options = {
 dataSource：{
 type：json，
 transport：{
 read：app /data/test.json
，
 pageSize：10 
}，
 sortable：true，
 pageable：true，
列：[{ 
字段：firstName，
 title：名字
}，{
字段：lastName，
标题：姓氏
 
}，{
字段：国家
}] 
}; 
  

I'm trying to bind a kendo ui grid to a json file with no luck.

All the examples I found were when creating the grid in code. I need to do it declaratively.

Is it the same to put the dataSource separately in the scope as I did, or inside the "options"?

If I set the "myDataSrc" to a simple array in code, the binding works. But as a " kendo.data.DataSource" from a file, it does not.

<div kendo-grid k-options="options" k-data-source="myDataSrc"></div>


        $scope.myDataSrc = new kendo.data.DataSource({
            transport: {
                read: {
                    url: "test.json",
                    dataType: "json"
                }
            }
        });

        $scope.options = {
            sortable: true,
            pageable: true,
            columns: [{
                field: "firstName",
                title: "First Name"
            },{
                field: "lastName",
                title: "Last Name"

            },{
                field: "country"
            },{
                field: "City"
            },{
                field: "Title"
            }]
        };


[
    { "firstName":"John" , "lastName":"Doe", "country": "country1" },
    { "firstName":"Anna" , "lastName":"Smith", "country": "country2" },
    { "firstName":"Peter" , "lastName":"Jones", "country": "country3" }
]

Thanks!

解决方案

This finally worked for me:

<div kendo-grid k-options="options"></div>


        $scope.options = {
            dataSource: {
                type: "json",
                transport: {
                    read: "app/data/test.json"
                },
                pageSize: 10
            },
            sortable: true,
            pageable: true,
            columns: [{
                field: "firstName",
                title: "First Name"
            },{
                field: "lastName",
                title: "Last Name"

            },{
                field: "country"
            }]
        };

这篇关于将kendo ui网格绑定到json文件，而不用在代码中生成网格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！