kendo ui gird使用技巧(使用本地數據) 一

添加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是格式化顯示，其它的一些針對於具體表格顯示的列的設置也是在這裏