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}",  "130px" },
                            { field: "name", title: "名称",  "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}",  "130px" },
                            { field: "name", title: "名称",  "130px" }
                        ]

field是指单挑数据中的相应的字段，title是表头显示的文字，format是格式化显示。其他的一些对于详细表格设置列在这里显示

版权声明：本文博客原创文章，博客，未经同意，不得转载。