一、效果展示

二、基礎學習

1、元件基礎引用js與css

<script src="resource/kendoui/js/jquery.min.js"></script>
<script src="resource/kendoui/js/kendo.all.min.js"></script>                   <!-- 熟悉時可引用特點元件的js -->
<link href="resource/kendoui/styles/kendo.common.min.css" rel="stylesheet" />  <!-- 基本樣式定義，必須 -->
<link href="resource/kendoui/styles/kendo.default.min.css" rel="stylesheet" /> <!-- 預設的所有 kendoUI 元件的樣式定義-->
 

$("#id").kendoGrid({ 屬性設定列表 });

1、dataSource了與 schema 屬性

資料來源，可以是本地資料（如：json物件陣列）或遠端資料（如：訪問REST 服務返回json資料）

下面是自己測試成功的模板（官網給的不可用！）：

<div id="grid1"></div>
<div id="grid2"></div>
<script>
    var people = [ { firstName: "John",lastName: "Smith",email: "[email protected]
 
" } ];
    $(document).ready(function () {
	//載入本地資料
    	$("#grid").kendoGrid({ dataSource:people});  	//設定資料來源為本地json物件陣列，表頭即屬性firstName、lastName、Email	
        //重點:載入遠端資料
	$("#grid").kendoGrid({ 
            dataSource:{
		transport:{
		    read:{
		        url:"REST_URL"，		//REST_URL 為返回json物件陣列的REST 服務
			dataType:"json"			//REST 服務一般返回json
		    }
		},		
		schema:{
		    data:"dataName",			//必須屬性，dataName為我們使用的json物件陣列
		    model:{
			//欄位對映與解析
		        fields:{
			    fieldName1:{type:"string|number|date"}
			    fieldName2:{type:"string|number|date"}
			    ……
			}
    	 	    }	
		}
	    },
	    //欄位與表格表頭的對映
	    columns：[
		{field:"fileName1",title:"第一列的表頭"},
		{field:"fileName2",title:"第二列的表頭"}
		……
	    ]
	    //其它設定
        });  
   });
</script>
 

測試程式碼：

var obj2;
$.get(  
	"service/request/fields",  
	function(data){ obj2=data };
	"json"
);

可見，返回的是Object，而我們需要的是fields的json物件陣列，所以不能直接使用。
第三步：
生成最基礎的表格，測試關鍵js程式碼：

//#test_grid為一個空div
var grid=$("#test_grid").kendoGrid({
    dataSource:{
        transport : {
	    read : {
		url : "service/request/fields",
		dataType : "json"
	    }
	},
	schema: {
	    data:"fields",
                model: {
                    fields: {
                        id: { type: "string" },
                        name: { type: "string" }
                    }
                }
        }
    },
    height: 300,//沒有width屬性，因為通常是在div中生成表格，而div為塊元素
    groupable: true,
    sortable: true,
    pageable: {
        refresh: true,
        pageSizes: true,
        buttonCount: 5
    },
    columns: [
        {field:"name",title:"Name",width:50},
        {field:"id",title:"ID",width:50}
    ]
});

所有的記錄都在展示在同一個表格中，左下角的按鈕樣式不對（說明沒有引用某個css檔案），且資料沒有進行分頁，右下角顯示no items to display。

第四步：

修改data 屬性值，程式碼為：

var grid=$("#test_grid").kendoGrid({
    dataSource: {
        transport: {
            read: "service/request/fields",
            type: "GET",
            dataType:"json"
        },
        schema: {
	    data: function(d){
		return d.fields;
	    },
            model: {
                fields: {
                    id: { type: "string" },
                    name: { type: "string" }
                }
            },
            total: function(data) {
                return data.fields.length; 
            }
        },
        pageSize: 20
    },
    height: 300,
    groupable: true,
    sortable: true,
    filterable:true,
    pageable: {
        refresh: true,
        pageSizes: true,
        buttonCount: 5
    },
    columns: [
        {field:"name",title:"Name",width:50},
        {field:"id",title:"ID",width:50}
    ]
});

同時引入kendo.default.min.css，則結果為：

若上面改為引入kendo.bootstrap.min.css，則結果樣式為：

四、總結

1、關於引用的js 與css 檔案

必須引用：

<script src="resource/kendoui/js/jquery.min.js"></script>
<script src="resource/kendoui/js/kendo.all.min.js"></script>                   <!-- 熟悉時可引用特點元件的js -->
<link href="resource/kendoui/styles/kendo.common.min.css" rel="stylesheet" />  <!-- 基本樣式定義，必須 -->
<link href="resource/kendoui/styles/kendo.default.min.css" rel="stylesheet" /> <!-- 預設的所有 kendoUI 元件的樣式定義-->

對元件比較熟悉時，可不引用kendo.all.min.js而只引用用到的元件的js。對kendo.default.min.css同理，可替換為bootstrap風格的kendo.bootstrap.min.css或其它風格的css。

2、資料欄位格式
格式有string、number、date等，都可對顯示的資料格式進行控制。如：

columns: [
	{field:"stringType",title:"字串型別",width:100},
	{field:"numberType",title:"數字型別",width:100},
	{field:"dateType", title:"日期型別",width:100}
]

3、資料繫結

作用：

實現：

4、較完整可重用示例

程式碼：

效果：