kendo ui gird使用技巧(使用本地数据) 一

来源：互联网发布：预测炒股票软件哪家好编辑：程序博客网时间：2024/06/03 05:33

添加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是格式化显示，其它的一些针对于具体表格显示的列的设置也是在这里

0 0