KendoUI:Grid控件的使用

http://blog.csdn.net/sun_jy2011/article/details/41545671

1.创建和基本选项配置

有两种创建grid的方式,我这里使用已存在的html div标签,然后再将div元素kendo化.

[html]  view plain  copy

1. <div id=”grid”></div>  
2.   
3. <script th:inline=”javascript”>  
4. $(function(){  
5.       
6.   $('#grid') .kendoGrid({  
7.                 dataSource : dataSource, //数据源加载  
8.        pageable : {   //分页信息选项设置  
9.         input : true,   
10.         numeric : false,   
11.         refresh: true,   
12.                           pageSizes: true,   
13.                           buttonCount: 5   
14.       },   
15.       sortable : true, //可排序  
16.       height : 430, //表格高度设置  
17.       toolbar : [ //工具条，可使用模板自定义  
18.         {   
19.         name : "create",   
20.         text : "添加"   
21.         },   
22.                          {   
23.         template :  
24.                                   kendo.template($("#pageStyleSkinTemplAddTemplate").html())   
25.                },   
26.                {   
27.         template :   
28.                                   kendo.template($("#pageStyleSkinQueryTemplate").html())   
29.         }   
30.     ],   
31.               columns : [ //表格列设置  
32.               {   
33.                  field: "fileName", //dataSource中与data对应的域（field）的名称  
34.                  title: "风格名称", //表头名称  
35.                  width: 200   //列宽  
36.              },   
37.              {   
38.                  field: "updaterId",   
39.                  title: "更新人",   
40.                  width: 100   
41.              },   
42.              {   
43.                  field: "updateTime",   
44.                  title: "上传时间",   
45.                  width: 200,   
46.                  format: "{0: yyyy-MM-dd HH:mm:ss}" //格式化时间  
47.              },   
48.             {   
49.         command : [  //对行数据的操作  
50.                     {   
51.                         text:"编辑", //名称  
52.                         click: editFunction //自定义点击事件  
53.                     },   
54.                     {   
55.                         text:"下载",   
56.                         click: loadFunction   
57.                     },   
58.                     {   
59.                         name : "destroy", //调用dataSource中的删除方法  
60.                         text : "删除"   
61.                     }   
62.                 ],   
63.                 title : "操作", //表头名称  
64.                 width : "250px" //列宽  
65.             }   
66.             ],   
67.             editable :   
68.          {   
69.             mode : "popup", //弹出窗口的编辑模式（行内编辑：”inline”）  
70.          },   
71.             messages : //分页条部分显示中文信息的设置  
72.          {   
73.             display : "Showing {0}-{1} from {2} data items",   
74.             empty : "No data"   
75.          }   
76.       
77. });  
78.   
79.   
80. });  
81. </script>  

2.基本CRUD操作

(1)假设数据来源为ajax请求,我这里不使用kendo封装好的ajax请求,使用灵活的自己写的ajax请求.

[html]  view plain  copy

1. var codeGridSource = new kendo.data.DataSource(  
2.     {  
3.       transport : {  
4.         read : function(options) {  
5.             var map = {};  
6.             if (options.data.take)  
7.                 map.take = options.data.take;  
8.             if (options.data.skip)  
9.                 map.skip = options.data.skip;  
10.             if (options.data.page)  
11.                 map.page = options.data.page;  
12.             if (options.data.pageSize)  
13.                 map.pageSize = options.data.pageSize;  
14.             if (!options.data.filter){  
15.             }   
16.             else   
17.             {  
18.                 options.data.filter = {  
19.                     logic : "and",  
20.                     filters : [  
21.                     {  
22.                         field : "codeName",  
23.                         value : $("#codeName").val()  
24.                     },  
25.                     {  
26.                         field : "codeType",  
27.                         value : $("#codeType").val()  
28.                     },  
29.                     {  
30.                         field : "codeTypeName",  
31.                         value : $("#codeTypeName").val()  
32.                     },  
33.                     {  
34.                         field : "codeCode",  
35.                         value : $("#codeCode").val()  
36.                     }  
37.                     ]};  
38.                 var fi1 = {};  
39.                 var fi2 = [];  
40.                 var j = 0;  
41.                 $.each(options.data.filter.filters, function(i,element) {  
42.                     if (options.data.filter.filters[i].value)   
43.                     {  
44.                         fi2[j] = options.data.filter.filters[i];  
45.                         j++;  
46.                     }  
47.                 });  
48.                 if (fi2.length > 0)   
49.                 {  
50.                     fi1.filters = fi2;  
51.                     fi1.logic = options.data.filter.logic;  
52.                     map.filter = fi1;  
53.                 }  
54.             }  
55.   
56.             //排序  
57.             if (!options.data.sort)   
58.             {  
59.             }   
60.             else   
61.             {  
62.                 options.data.sort = [  
63.                 {  
64.                     field : $("#codeOrder0").val(),  
65.                     dir : $("#codeDir0").val()  
66.                 },  
67.                 {  
68.                     field : $("#codeOrder1").val(),  
69.                     dir : $("#codeDir1").val()  
70.                 }   
71.                 ];  
72.                 var fi3 = [];  
73.                 var j = 0;  
74.                 $.each(options.data.sort, function(i,element){  
75.                     if (options.data.sort[i].field) {  
76.                         fi3[j] = options.data.sort[i];  
77.                         j++;  
78.                     }  
79.                 });  
80.                 if (fi3.length > 0)   
81.                 {  
82.                     map.sort = fi3;  
83.                 }  
84.             }  
85.   
86.             $.ajax({  
87.               url : "code/single-list.json",  
88.               dataType: "json",   
89.               data:{  
90.                   models : kendo.stringify(map)  
91.               },  
92.               type:"POST",  
93.               success: function(result) {  
94.                 options.success(result);  
95.               },  
96.               error: function(result) {  
97.                 options.error(result);  
98.               }  
99.             });  
100.               
101.        },  
102.         update : function(options) {  
103.             $.ajax({  
104.               url : "code/single-update.json",  
105.               dataType: "json",   
106.               data:{  
107.                 models : kendo.stringify(options.data.models)  
108.               },  
109.               type:"POST",  
110.               success: function(result) {  
111.                 options.success(result);  
112.               },  
113.               error: function(result) {  
114.                 options.error(result);  
115.               }  
116.             });  
117.         },  
118.         destroy : function(options) {  
119.             $.ajax({  
120.               url : "code/delete.json",  
121.               dataType: "json",   
122.               data:{  
123.                 models : kendo.stringify(options.data.models)  
124.               },  
125.               type:"POST",  
126.               success: function(result) {  
127.                 options.success(result);  
128.               },  
129.               error: function(result) {  
130.                 options.error(result);  
131.               }  
132.             });  
133.       },  
134.         create : function(options) {  
135.             $.ajax({  
136.               url : "code/single-create.json",  
137.               dataType: "json",   
138.               data:{  
139.                 models : kendo.stringify(options.data.models)  
140.               },  
141.               type:"POST",  
142.               success: function(result) {  
143.                 options.success(result);  
144.               },  
145.               error: function(result) {  
146.                 options.error(result);  
147.               }  
148.             });  
149.               
150.         }  
151.         },  
152.         batch : true,  
153.         pageSize : 8,  
154.         serverPaging : true,  
155.         serverSorting : true,  
156.         serverFiltering : true,  
157.         schema : {  
158.             errors: function(response)   
159.             {  
160.                 return response.error;   
161.             },  
162.             data : "list",  
163.             total : "total",  
164.             model : {  
165.                 id : "id",  
166.                 fields :   
167.                 {  
168.                     codeIndex:  
169.                     {  
170.                         editable : true,  
171.                         type:"number",  
172.                         defaultValue: 0,  
173.                         validation:{  
174.                             required:true,  
175.                             min:0  
176.                         }  
177.                     },  
178.                     codeCode :   
179.                         {  
180.                             editable : true,  
181.                             type:"string",  
182.                             validation:  
183.                             {  
184.                                 codeCodevalidation: function (input)   
185.                                 {  
186.                                     if (input.is("[name=codeCode]") && $.trim(input.val()) == "" )  
187.                                     {  
188.                                              input.attr("data-codeCodevalidation-msg", "请输入业务代码！");  
189.                                              input.css("border-color","red");  
190.                                              return false;  
191.                                     }  
192.                                     else{  
193.                                         input.css("border-color"," #94C0D2");  
194.                                     }  
195.                                     return true;  
196.                                 }  
197.                             }  
198.                     },  
199.                     codeName :   
200.                     {  
201.                         editable : true,  
202.                         type:"string"  
203.                     },  
204.                     codeType :   
205.                     {  
206.                         editable : true,  
207.                         type:"string",  
208.                         validation:  
209.                         {  
210.                             codeTypevalidation: function (input)   
211.                             {  
212.                                 if (input.is("[name=codeType]") && $.trim(input.val()) == "")  
213.                                 {  
214.                                          input.attr("data-codeTypevalidation-msg", "请输入代码类型！");  
215.                                          input.css("border-color","red");  
216.                                          return false;  
217.                                 }  
218.                                 else{  
219.                                     input.css("border-color"," #94C0D2");  
220.                                 }  
221.                                 return true;  
222.                             }  
223.                         }  
224.                     },  
225.                     codeTypeName:   
226.                     {  
227.                         editable : true,  
228.                         type:"string"  
229.                     }  
230.                 }  
231.             }  
232.         },  
233.         error: function(e) {  
234.             alert(e.errors);  // displays "Invalid query"  
235.             codeGridSource.cancelChanges();  
236.         }  
237.   });  

(2)使用kendo自带的封装好的ajax请求来实现.

[html]  view plain  copy

1. var dataSource = new kendo.data.DataSource(   
2.     {   
3.       transport : {   
4.         read : {   
5.             url : "xxx.json", //定义查询url  
6.             type : "POST"   
7.             },   
8.         create : {   
9.             url : "xxx.json", //定义新增url  
10.             type : "POST"   
11.             },   
12.                           update : {   
13.             url : "xxx.json", //定义修改url  
14.             type : "POST"   
15.             },   
16.         destroy : {   
17.             url : "xxx.json", //定义删除url  
18.             type : "POST"   
19.             },   
20.         parameterMap : function(options,operation) { //定义提交给后台携带的参数  
21.             var map = {};   
22.             if (operation !== "read") {   
23.                 return {   
24.                 models : kendo.stringify(options.models) //查询操作时返回的参数  
25.                 };   
26.             };   
27.   
28.             if (options.take)   
29.                 map.take = options.take;   
30.             if (options.skip)   
31.                 map.skip = options.skip;   
32.             if (options.page)   
33.                 map.page = options.page;   
34.             if (options.pageSize)   
35.                 map.pageSize = options.pageSize;   
36.             if (!options.filter) {   
37.             }   
38.             else   
39.             {   
40.                                                   //设置查询条件和连接符  
41.                 options.filter = {   
42.                     logic : "and", //定义查询条件间的连接符  
43.                     filters : [   
44.                     {   
45.                         field : "startTime",   
46.                         value : $("#startTime").val() //查询条件的值的取值  
47.                     },   
48.                     {   
49.                         field : "endTime",   
50.                         value : $("#endTime").val()   
51.                     },   
52.                     {   
53.                         field : "fileName",   
54.                         value : $("#fileName").val()   
55.                     },   
56.                        
57.                        
58.                     ]};   
59.                 var fi1 = {};   
60.                 var fi2 = [];   
61.                 var j = 0;   
62.                 $.each(options.filter.filters, function(i,element) {   
63.                     if (options.filter.filters[i].value)   
64.                     {   
65.                         fi2[j] = options.filter.filters[i];   
66.                         j++;   
67.                     }   
68.                 });   
69.                 if (fi2.length > 0)   
70.                 {   
71.                     fi1.filters = fi2;   
72.                     fi1.logic = options.filter.logic;   
73.                     map.filter = fi1;   
74.                 }   
75.                                      }   
76.             if (!options.sort)   
77.             { }   
78.             else   
79.             {   
80.                                                    //排序 选项的设置  
81.                 options.sort = [   
82.                 {   
83.                     field : $("#pageStyleSkinOrder0").val(),   
84.                     dir : $("#pageStyleSkinDir0").val()   
85.                 },   
86.                 {   
87.                     field : $("#pageStyleSkinOrder1").val(),   
88.                     dir : $("#pageStyleSkinDir1").val()   
89.                 }   
90.                 ];   
91.                 var fi3 = [];   
92.                 var j = 0;   
93.                 $.each(options.sort, function(i,element){   
94.                     if (options.sort[i].field) {   
95.                         fi3[j] = options.sort[i];   
96.                         j++;   
97.                     }   
98.                 });   
99.                 if (fi3.length > 0)   
100.                 {   
101.                     map.sort = fi3;   
102.                 }   
103.             }   
104.   
105.             //操作为查询时提交给后台的参数   
106.             if (operation === "read")   
107.             {   
108.                 return {   
109.                     models : kendo.stringify(map)   
110.                 };   
111.             }   
112.   
113.          }   
114.         },   
115.         batch : true, //可批量操作  
116.         pageSize : 8, //每页显示条数设置  
117.         serverPaging : true, //支持分页功能  
118.         serverSorting : true,//支持排序功能   
119.         serverFiltering : true, //支持查询功能   
120.         schema : {   
121.             errors: function(response)   
122.             {   
123.                 return response.error; //错误信息显示  
124.             },   
125.             data : "list", //定义数据来源  
126.             total : "total", //页码总数  
127.             model : {   
128.                 id : "id", //id设置  
129.                 fields :   
130.                 {   
131.                                                                 //根据data中对象的字段来获取要获取的字段的值  
132.                     fileName :   
133.                         {   
134.                            editable : true, //设置为可编辑  
135.                            validation : //校验：不能为空  
136.                             {   
137.                                 required : true   
138.                             }   
139.                         },   
140.                     updateTime:   
141.                         {   
142.                            type:"date" //设置字段类型  
143.                         }   
144.                        
145.                 }   
146.             }   
147.         },   
148.         error: function(e) { //显示error信息  
149.             alert(e.errors);    
150.             dataSource.cancelChanges();   
151.         }   
152.                                            
153.   });