如何将json数据绑定到kendo网格 [英] How to bind json data to kendo grid
问题描述
大家好，
我有这个代码用于将kendo json数据绑定到kendo网格，但它无效。请帮帮我。这是我正在使用的代码。
//在HtmlPage1.html里面
< ！DOCTYPE html>
< html>
< head>
< meta charset =utf-8>
< title>无标题< / title>
< script src =http://code.jquery.com/jquery-1.9 .1.min.js>< / script>
< script src =http://kendo.cdn.telerik.com/2016.1.226/js/angular.min。 js>< / script>
< script src =http://kendo.cdn.telerik.com/2016.1.226/js/jszip.min.js>< ; / script>
< script src =http://kendo.cdn.telerik.com/2016.1.226/js/kendo.all.min.js>< / script> ;
< / head>
< body>
< script>
$（function（）{
//调用kendogrid函数
$（＃grid）。kendoGrid（{//使用k endo ui javascript api获取列名
列：[{title：First Name，字段：firstname，template：
}，//列标题的标题，设置名字的模板
{标题：姓氏，字段：姓氏，模板：
}，
{标题：图片，字段：图片，模板：< img src ='＃=图片＃'height ='100' width ='150'/>}，//指定图片列的模板
{title：Email，字段：email，模板：＃= email＃}
]，
dataSource：{
//数据：人，//不使用本地javascript数组作为数据如上所述，但是来自json
运输：
{
阅读：
{
url：data / people.json
}
}，
架构：
{
数据：数据，
总计：计数
}，
pageSize：3
}，
身高：400，
可滚动：true，
pageable：true，
sortable：true，
groupable：true
}）;
}）;
< / script>
< / body>
< / html>
//在data / people.json内部
[< br $>
{
firstname：Todd，
姓氏：Anglin，
picture：images / todd.jpg，
email：todd.anglin@gmail.com< br $>
}，
{
firstname：Ronn，
lastname：Jobs，
picture：images / ronn.jpg，
email：ronn.jobs@hotmail.com
} ，
{
firstname：Malisa，
lastname：Hanks，
picture：images / malisa.jpg，
email：mali.hanks@yahoo.com
}，
{
firstname：Torey，
lastname：Wilson，
picture：images / torey .jpg，
email：torey@gmail.com
}
]
我收到404错误，无法加载json文件。
谢谢
我尝试过：
$（＃grid）。ken doGrid（{//使用kendo ui javascript api获取列名
列：[{title：First Name，字段：firstname，template：
}，//列标题的标题，firstname的设置模板
{title：姓氏，字段：lastname，模板：
}，
{标题：图片，字段：图片，模板：< img src ='＃= picture＃ 'height ='100'width ='150'/>}，//指定图片列的模板
{title：Email，字段：email，模板：＃=电子邮件＃}
]，
dataSource：{
//数据：人，//不使用本地javascript数组作为数据，但来自json
运输：
{
读取：
{
// url：data / people.json
url：people.json
}
}，
架构：
{
数据：数据，
总计：count
}，
pageSize：3
}，
身高：400，
scrollable：true，
pageable：true，
sortable：true，
groupable：true
}） ;
（function（）{
//调用kendogrid函数
< blockquote>（＃grid）。kendoGrid（{//使用kendo ui javascript api获取列名
列：[{title：名字，字段：firstname，模板：
}，//列标题的标题，设置名字的模板
{标题：姓氏，字段：姓氏，模板：
}，
{标题：图片，字段：图片，模板：< img src ='＃=图片＃'height ='100'width = '150'/>}，//指定图片列的模板
{title：Email，字段：email，模板：＃= email＃}
]，
dataSource：{
//数据：人，//不使用本地javascript数组作为上述数据但是来自json
运输：
{
阅读：
{
url：data / people.json
}
}，
架构：
{
数据：数据，
总计：计数
}，
pageSize： 3
}，
身高：400，
可滚动：true，
pageable：true，
sortable：true，
groupable：true
}）;
}）;
< / script>
< / body>
< / html>
//内部数据/ people.json
[
{
firstname：Todd，
姓氏：Anglin，
picture：images / todd.jpg，
email：todd.anglin@gmail.com< br $>
}，
{
firstname：Ronn，
lastname：Jobs，
picture：images / ronn.jpg，
email：ronn.jobs@hotmail.com
} ，
{
firstname：Malisa，
lastname：Hanks，
picture：images / malisa.jpg，
email：mali.hanks@yahoo.com
}，
{
firstname：Torey，
lastname：Wilson，
picture：images / torey .jpg，
email：torey@gmail.com
}
]
我收到404错误，无法加载json文件。
谢谢
我尝试过：
列：[{title：First Name，字段：firstname，模板：
}，//列标题的标题，设置名字的模板
{title：姓氏，字段：姓氏，模板：
}，
{标题：图片，字段：图片，模板：< ; img src ='＃= picture＃'height ='100'width ='150'/>}，//指定图片列的模板
{title：Email，字段： 电子邮件，模板：＃=电子邮件＃}
]，
dataSource：{
/ / data：people，//不使用本地javascript数组作为数据，但是来自json
transport：
{
读取：
{
// url：data / people.json
url：people.json
}
}，
架构：
{
数据：数据，
总计： 数
}，
pageSize：3
}，
身高：400，
可滚动：true，
pageable：true，
sortable：true，
groupable：true
}）;
Hi All,
I have this code for binding kendo json data to kendo grid but its not working. Please help me out. Here is the code that I was working with.
//inside HtmlPage1.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled</title>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2016.1.226/js/angular.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2016.1.226/js/jszip.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2016.1.226/js/kendo.all.min.js"></script>
</head>
<body>
<script>
$(function () {
//calling the kendogrid function
$("#grid").kendoGrid({ //using kendo ui javascript api to get column names
columns: [{ title: "First Name", field: "firstname", template: "
" },//title for column header, setting template for firstname
{ title: "Last Name", field: "lastname", template: "
" },
{ title: "Picture", field: "picture", template: "<img src='#=picture #' height='100' width='150'/>" },//specifying template for picture column
{ title: "Email", field: "email", template: "#=email#" }
],
dataSource: {
//data: people, //not using the local javascript array as data as above but from json
transport:
{
read:
{
url: "data/people.json"
}
},
schema:
{
data: "data",
total: "count"
},
pageSize: 3
},
height: 400,
scrollable: true,
pageable: true,
sortable: true,
groupable: true
});
});
</script>
</body>
</html>
//inside data/people.json
[
{
"firstname": "Todd",
"lastname": "Anglin",
"picture": "images/todd.jpg",
"email": "todd.anglin@gmail.com"
},
{
"firstname": "Ronn",
"lastname": "Jobs",
"picture": "images/ronn.jpg",
"email": "ronn.jobs@hotmail.com"
},
{
"firstname": "Malisa",
"lastname": "Hanks",
"picture": "images/malisa.jpg",
"email": "mali.hanks@yahoo.com"
},
{
"firstname": "Torey",
"lastname": "Wilson",
"picture": "images/torey.jpg",
"email": "torey@gmail.com"
}
]
I get 404 error that json file could not be loaded.
Thanks
What I have tried:
$("#grid").kendoGrid({ //using kendo ui javascript api to get column names
columns: [{ title: "First Name", field: "firstname", template: "
" },//title for column header, setting template for firstname
{ title: "Last Name", field: "lastname", template: "
" },
{ title: "Picture", field: "picture", template: "<img src='#=picture #' height='100' width='150'/>" },//specifying template for picture column
{ title: "Email", field: "email", template: "#=email#" }
],
dataSource: {
//data: people, //not using the local javascript array as data as above but from json
transport:
{
read:
{
//url: "data/people.json"
url:"people.json"
}
},
schema:
{
data: "data",
total: "count"
},
pageSize: 3
},
height: 400,
scrollable: true,
pageable: true,
sortable: true,
groupable: true
});
(function () {
//calling the kendogrid function
("#grid").kendoGrid({ //using kendo ui javascript api to get column names
columns: [{ title: "First Name", field: "firstname", template: "#= firstname #" },//title for column header, setting template for firstname
{ title: "Last Name", field: "lastname", template: "#= lastname #" },
{ title: "Picture", field: "picture", template: "<img src='#=picture #' height='100' width='150'/>" },//specifying template for picture column
{ title: "Email", field: "email", template: "#=email#" }
],
dataSource: {
//data: people, //not using the local javascript array as data as above but from json
transport:
{
read:
{
url: "data/people.json"
}
},
schema:
{
data: "data",
total: "count"
},
pageSize: 3
},
height: 400,
scrollable: true,
pageable: true,
sortable: true,
groupable: true
});
});
</script>
</body>
</html>
//inside data/people.json
[
{
"firstname": "Todd",
"lastname": "Anglin",
"picture": "images/todd.jpg",
"email": "todd.anglin@gmail.com"
},
{
"firstname": "Ronn",
"lastname": "Jobs",
"picture": "images/ronn.jpg",
"email": "ronn.jobs@hotmail.com"
},
{
"firstname": "Malisa",
"lastname": "Hanks",
"picture": "images/malisa.jpg",
"email": "mali.hanks@yahoo.com"
},
{
"firstname": "Torey",
"lastname": "Wilson",
"picture": "images/torey.jpg",
"email": "torey@gmail.com"
}
]
I get 404 error that json file could not be loaded.
Thanks
What I have tried:
("#grid").kendoGrid({ //using kendo ui javascript api to get column names
columns: [{ title: "First Name", field: "firstname", template: "#= firstname #" },//title for column header, setting template for firstname
{ title: "Last Name", field: "lastname", template: "#= lastname #" },
{ title: "Picture", field: "picture", template: "<img src='#=picture #' height='100' width='150'/>" },//specifying template for picture column
{ title: "Email", field: "email", template: "#=email#" }
],
dataSource: {
//data: people, //not using the local javascript array as data as above but from json
transport:
{
read:
{
//url: "data/people.json"
url:"people.json"
}
},
schema:
{
data: "data",
total: "count"
},
pageSize: 3
},
height: 400,
scrollable: true,
pageable: true,
sortable: true,
groupable: true
});
这篇关于如何将json数据绑定到kendo网格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
