KendoUI Grid 服务器分页（可选单页显示数据量） 

1 <div id="parent">
2         <div id="grid"></div>
3  </div>

 

 1 var dataSource = new kendo.data.DataSource({
 2             transport: {
 3                 read: {
 4                     url: "/Product/Data",
 5                     type: "POST",
 6                     dataType: "json"
 7                 },
 8                 update: {
 9                     url: "/Product/Update",
10                     type: "POST",
11                     dataType: "json"
12                 },
13                 parameterMap: function (options, operation) {  //X
14                     if (operation == "read") { 
15                         return {
16                             page: options.page, pageSize: options.pageSize, site: _site, sku: _sku
17                         };
18                     } else if (operation == "update") {
19                         return { models: JSON.stringify(options) };
20                     }
21                 }
22             },
23             requestEnd: function (e) {
24                 if (e.type == "update") {
25                     var response = e.response;
26                     if (!response) {
27                         dataSource.cancelChanges();
28                     }
29                 }
30             },
31             schema: {
32                 error: function (response) {
33                     return response.error; //错误信息显示
34                 },
35                 total: function (d) {
36                     return d._count;
37                 },
38                 data: function (d) {
39                     return d.results;
40                 },
41                 model: {
42                     id: "Id",
43                     fields: {
44                         Id: { editable: false },
45                         Site: { editable: false },
46                         SKU: { editable: false }
47                     }
48                 }
49             },
50             error: function (e) {
51                 alert(e.errorThrown);
52                 dataSource.cancelChanges();
53             },
54             pageSize: 500,      //初始单页数据量
55             serverPaging: true, //启用服务器分页
56             serverFiltering: true //启用服务器过滤
57         })
View Code
  1 $("#grid").kendoGrid({
  2                 dataSource: dataSource,
  3                 selectable: "single row",  //只允许选择单行
  4                 pageable: {
  5                     refresh: true,  //启用刷新按钮
  6                     pageSizes: [100,200,300,400,500], //可选单页数据量集合
  7                     messages : {
  8                         display : "{0} - {1} 共 {2} 条数据",
  9                         empty : "没有要显示的数据",
 10                         page: "Page",
 11                         of : "of {0}", // {0} is total amount of pages
 12                         itemsPerPage : "items per page",
 13                         first : "首页",
 14                         previous : "前一页",
 15                         next : "下一页",
 16                         last : "最后一页",
 17                         refresh : "刷新"
 18                     },
 19                     buttonCount: 5
 20                 },
 21                 scrollable: true,
 22                 groupable: false,
 23                 filterable: {
 24                     extra: false,
 25                     serverable: true,
 26                     operators: {
 27                         string: {
 28                             eq: "Equals",
 29                             neq:"NoEquals"
 30                         }
 31                     },
 32                     mode: "menu" //过滤器显示在表头  row  显示在第一行
 33                 },
 34                 columns: [
 35                     {
 36                         field: "SKU", title: "SKU", width: 300, filterable: {
 37                             extra: false,
 38                             serverable: true,
 39                             operators: {
 40                                 string: {
 41                                     eq: "Contains",
 42                                 }
 43                             },
 44                             mode: "menu"
 45                         }
 46                     },
 47                     { field: "OperateClass", title: "运营大类" },
 48                     { field: "Classes", title: "大类" },
 49                     { field: "ModelBrand", title: "品牌" },
 50                     { field: "Model", title: "机型" },
 51                     { field: "Style", title: "款式" },
 52                     { field: "Color", title: "颜色" },
 53                     { field: "K3", title: "K3" },
 54                     {
 55                         field: "ProductCode", title: "PID", filterable: {
 56                             extra: false,
 57                             serverable: true,
 58                             operators: {
 59                                 string: {
 60                                     eq: "Contains",
 61                                 }
 62                             },
 63                             mode: "menu"
 64                         }
 65                     },
 66                     {
 67                         field: "Site", title: "站点", filterable: {
 68                             extra: false,
 69                             serverable: true,
 70                             operators: {
 71                                 string: {
 72                                     eq: "Equals",
 73                                 }
 74                             },
 75                             mode: "menu",
 76                             multi: false,
 77                             ui: siteFilter
 78                         }
 79                     },
 80                     {
 81                         field: "CASIN", title: "CASIN", filterable: {
 82                             extra: false,
 83                             serverable: true,
 84                             operators: {
 85                                 string: {
 86                                     eq: "Contains",
 87                                 }
 88                             },
 89                             mode: "menu"
 90                         }
 91                     },
 92                     {
 93                         field: "FNSKU", title: "FNSKU", filterable: {
 94                             extra: false,
 95                             serverable: true,
 96                             operators: {
 97                                 string: {
 98                                     eq: "Contains",
 99                                 }
100                             },
101                             mode: "menu"
102                         }
103                     },
104                     { command: "edit" }
105                 ],
106                 editable: "inline"  //行内编辑
107             });
View Code
 1 function siteFilter(element) {
 2             element.kendoDropDownList({
 3                 dataTextField: "SiteName",
 4                 dataValueField: "Site",
 5                 dataSource: {
 6                     transport: {
 7                         read: {
 8                             url: "/Product/SiteList",
 9                             type: "POST",
10                             dataType: "json"
11                         }
12                     }
13                 },
14                 optionLabel: "--Select Value--"
15             });
16         }
View Code

 

posted on 2017-07-13 18:38  尚竹下本  阅读(1417)  评论(0)  编辑  收藏  举报

导航