【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元件的初始化與資料讀取，下一篇我們將嘗試新增/刪除/修改一條記錄並提交至伺服器。