Kendo UI：grid完成增删改查（*）

【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组件的初始化与数据读取，下一篇我们将尝试新增/删除/修改一条记录并提交至服务器。