【Kendo UI 中文教程】使用Grid组件完成基本的CRUD操作(一)
KendoUI中最常用、最强大、也是最复杂的组件就是kendoGrid了,学会了使用Grid,便可轻松开发出数据CRUD的功能。
创建一个Grid
和其他的组件一样,创建一个Grid非常简单,我们只需要创建一个div元素,指定它的id,并将他初始化为kendoGrid。代码如下:
<div id="grid"></div>
----------
<script>
$(function(){
$("#grid").kendoGrid()
});
</script>
不过,这样创建的Grid光秃秃的啥也没有,我们需要给他指定列。很简单,在kendoGrid()的函数中传入一个带有columns属性的对象作为。如下:
<div id="grid"></div>
----------
<script>
$(function(){
$("#grid").kendoGrid({
columns: [
{ field: 'name',title:'名字' }, //field为字段名称,title为列头显示的文字
{ field: 'gender',title:'性别' }, },
{ field: 'age',title:'年龄' }, }],
height:400
});
});
</script>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
效果如图
当然,还有一些更多的配置项我没有多做介绍,有兴趣的朋友可以阅读官方API文档,自行尝试,举一反三,即可逐渐上手.
给Grid赋予数据
下面我们让Grid组件加载数据。在kendo中有一个非常常用的数据组件DataSource,可以用它进行数据的CRUD操作,Grid组件中也正是利用的DataSource进行数据管理。
加载本地数据
我们给Grid传入一个dataSource,并配置dataSource的data属性,让grid加载data中的数据。
<div id="grid" />
<script>
$(function() {
$("#grid").kendoGrid({
columns: [
{ field: 'name',title:'名字' },
{ field: 'gender',title:'性别'},
{ field: 'age',title:'年龄' }],
height:400,
dataSource:{
data:[
{name:"Jack",gender:"M",age:"28"},
{name:"Rose",gender:"F",age:"25"}
]
}
});
});
</script>
效果如图:
加载服务器上的数据
DataSource组件初始化时可以通过transport来配置服务器信息,指定服务器端的CRUD操作连接,以及http请求类型,数据类型等,来赋予Grid从服务器加载数据的能力,基本样例如图
<div id="grid" />
<script>
$(function() {
$("#grid").kendoGrid({
columns: [
{ field: 'name',title:'名字' },
{ field: 'gender',title:'性别'},
{ field: 'age',title:'年龄' }],
height:400,
dataSource: {
transport: {
read: {
url: "http://数据读取的连接",
dataType: "json" //也可以是jsonp,xml
type: "get"
}
},
schema: {
data: "results"
}
},
});
});
</script>
特别注意,schema中的{data:”results”},这个配置的作用是从服务器的数据中取出data字段的值作为grid的数据,意思就是服务器返回的数据格式为 { “results”: [ {数据1},{数据2}] }
本篇介绍了kendoGrid组件的初始化与数据读取,下一篇我们将尝试新增/删除/修改一条记录并提交至服务器。