加入js引用
<link href="http://cdn.kendostatic.com/2014.2.716/styles/kendo.common.min.css" rel="stylesheet" />
<link href="http://cdn.kendostatic.com/2014.2.716/styles/kendo.default.min.css" rel="stylesheet" />
<link href="http://cdn.kendostatic.com/2014.2.716/styles/kendo.dataviz.min.css" rel="stylesheet" />
<link href="http://cdn.kendostatic.com/2014.2.716/styles/kendo.dataviz.default.min.css" rel="stylesheet" />
<script src="http://cdn.kendostatic.com/2014.2.716/js/jquery.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.2.716/js/kendo.all.min.js"></script>
html
<div id="example">
<div id="grid"></div>
</div>
加入js绑定
<script>
var data={data:[{id:1,name:"test1"},{id:2,name:"test2"}],total:25}
$(document).ready(function() {
$("#grid").kendoGrid({
dataSource: {
data: data,
schema: {
data: "data",
total: "total",
model: {
id: "id",
fields: {
id: "id",
name: "name" }
}
},
pageSize: 20
},
height: 550,
scrollable: true,
sortable: true,
filterable: true,
pageable: {
input: true,
numeric: false
},
columns: [
{ field: "id", title: "id", format: "{0:c}", width: "130px" },
{ field: "name", title: "名称", width: "130px" }
]
});
});
</script>
终于效果图
总结:
1.加入js引用需首先加入jquery包,然后在去加入kendo ui js包,记得是加入kendo ui 的kendo.all.min.js 。当然也能够分别引用须要的kendo ui js 文件
2.这个地方我们给grid 使用的数据原事实上是一个datasorce对象,当然也能够使用kendo.data.DataSource()--这样的方法在后面的文件会介绍来创建。
3.我们使用的本地数据格式例如以下
var data={data:[{id:1,name:"test1"},{id:2,name:"test2"}],total:25}
data是一个数据数组也就是须要在grid中详细显示的数据,它有两个字段各自是id和name,然后total是数据总共条数。在grid中分页是自己主动计算会用到。
4.grid初始化的时候的datasorce具体说明如代码中凝视
{
data: data,//相应上面的变量
schema: {
data: "data", //data变量中的data字段
total: "total",//data变量中的total字段。数据总条数
model: {
id: "id",//唯一标示的字段
fields: {//与data变量中data数组的列隐射关系
id: "id",//单条数据中id字段
name: "name" <span style="font-family: Arial, Helvetica, sans-serif;">//单条数据中id字段</span><span style="font-family: Arial, Helvetica, sans-serif;"> </span>
<span style="font-family: Arial, Helvetica, sans-serif;"> }</span>
}
},
pageSize: 20
}
5.grid初始化中的详细表格须要显示的数据声明
columns: [
{ field: "id", title: "id", format: "{0:c}", width: "130px" },
{ field: "name", title: "名称", width: "130px" }
]
field是指单挑数据中的相应的字段,title是表头显示的文字,format是格式化显示。其他的一些对于详细表格设置列在这里显示
版权声明:本文博客原创文章,博客,未经同意,不得转载。