KendoUI:Grid控件的使用

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

1.创建和基本选项配置

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

[html]  view plain  copy <div id=”grid”></div>      <script th:inline=”javascript”>   $(function(){            $('#grid') .kendoGrid({                   dataSource : dataSource, //数据源加载          pageable : {   //分页信息选项设置           input : true,            numeric : false,            refresh: true,                              pageSizes: true,                              buttonCount: 5          },          sortable : true, //可排序         height : 430, //表格高度设置         toolbar : [ //工具条，可使用模板自定义           {            name : "create",            text : "添加"            },                             {            template :                                     kendo.template($("#pageStyleSkinTemplAddTemplate").html())                   },                   {            template :                                      kendo.template($("#pageStyleSkinQueryTemplate").html())            }        ],                  columns : [ //表格列设置                 {                     field: "fileName", //dataSource中与data对应的域（field）的名称                    title: "风格名称", //表头名称                    width: 200   //列宽                },                 {                     field: "updaterId",                     title: "更新人",                     width: 100                 },                 {                     field: "updateTime",                     title: "上传时间",                     width: 200,                     format: "{0: yyyy-MM-dd HH:mm:ss}" //格式化时间                },                {            command : [  //对行数据的操作                       {                            text:"编辑", //名称                           click: editFunction //自定义点击事件                       },                        {                            text:"下载",                            click: loadFunction                        },                        {                            name : "destroy", //调用dataSource中的删除方法                           text : "删除"                        }                    ],                    title : "操作", //表头名称                   width : "250px" //列宽               }                ],                editable :             {                mode : "popup", //弹出窗口的编辑模式（行内编辑：”inline”）            },                messages : //分页条部分显示中文信息的设置            {                display : "Showing {0}-{1} from {2} data items",                empty : "No data"             }           });         });   </script>  

2.基本CRUD操作

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

[html]  view plain  copy var codeGridSource = new kendo.data.DataSource(       {         transport : {           read : function(options) {               var map = {};               if (options.data.take)                   map.take = options.data.take;               if (options.data.skip)                   map.skip = options.data.skip;               if (options.data.page)                   map.page = options.data.page;               if (options.data.pageSize)                   map.pageSize = options.data.pageSize;               if (!options.data.filter){               }                else                {                   options.data.filter = {                       logic : "and",                       filters : [                       {                           field : "codeName",                           value : $("#codeName").val()                       },                       {                           field : "codeType",                           value : $("#codeType").val()                       },                       {                           field : "codeTypeName",                           value : $("#codeTypeName").val()                       },                       {                           field : "codeCode",                           value : $("#codeCode").val()                       }                       ]};                   var fi1 = {};                   var fi2 = [];                   var j = 0;                   $.each(options.data.filter.filters, function(i,element) {                       if (options.data.filter.filters[i].value)                        {                           fi2[j] = options.data.filter.filters[i];                           j++;                       }                   });                   if (fi2.length > 0)                    {                       fi1.filters = fi2;                       fi1.logic = options.data.filter.logic;                       map.filter = fi1;                   }               }                  //排序               if (!options.data.sort)                {               }                else                {                   options.data.sort = [                   {                       field : $("#codeOrder0").val(),                       dir : $("#codeDir0").val()                   },                   {                       field : $("#codeOrder1").val(),                       dir : $("#codeDir1").val()                   }                    ];                   var fi3 = [];                   var j = 0;                   $.each(options.data.sort, function(i,element){                       if (options.data.sort[i].field) {                           fi3[j] = options.data.sort[i];                           j++;                       }                   });                   if (fi3.length > 0)                    {                       map.sort = fi3;                   }               }                  $.ajax({                 url : "code/single-list.json",                 dataType: "json",                  data:{                     models : kendo.stringify(map)                 },                 type:"POST",                 success: function(result) {                   options.success(result);                 },                 error: function(result) {                   options.error(result);                 }               });                         },           update : function(options) {               $.ajax({                 url : "code/single-update.json",                 dataType: "json",                  data:{                   models : kendo.stringify(options.data.models)                 },                 type:"POST",                 success: function(result) {                   options.success(result);                 },                 error: function(result) {                   options.error(result);                 }               });           },           destroy : function(options) {               $.ajax({                 url : "code/delete.json",                 dataType: "json",                  data:{                   models : kendo.stringify(options.data.models)                 },                 type:"POST",                 success: function(result) {                   options.success(result);                 },                 error: function(result) {                   options.error(result);                 }               });         },           create : function(options) {               $.ajax({                 url : "code/single-create.json",                 dataType: "json",                  data:{                   models : kendo.stringify(options.data.models)                 },                 type:"POST",                 success: function(result) {                   options.success(result);                 },                 error: function(result) {                   options.error(result);                 }               });                          }           },           batch : true,           pageSize : 8,           serverPaging : true,           serverSorting : true,           serverFiltering : true,           schema : {               errors: function(response)                {                   return response.error;                },               data : "list",               total : "total",               model : {                   id : "id",                   fields :                    {                       codeIndex:                       {                           editable : true,                           type:"number",                           defaultValue: 0,                           validation:{                               required:true,                               min:0                           }                       },                       codeCode :                            {                               editable : true,                               type:"string",                               validation:                               {                                   codeCodevalidation: function (input)                                    {                                       if (input.is("[name=codeCode]") && $.trim(input.val()) == "" )                                       {                                                input.attr("data-codeCodevalidation-msg", "请输入业务代码！");                                                input.css("border-color","red");                                                return false;                                       }                                       else{                                           input.css("border-color"," #94C0D2");                                       }                                       return true;                                   }                               }                       },                       codeName :                        {                           editable : true,                           type:"string"                       },                       codeType :                        {                           editable : true,                           type:"string",                           validation:                           {                               codeTypevalidation: function (input)                                {                                   if (input.is("[name=codeType]") && $.trim(input.val()) == "")                                   {                                            input.attr("data-codeTypevalidation-msg", "请输入代码类型！");                                            input.css("border-color","red");                                            return false;                                   }                                   else{                                       input.css("border-color"," #94C0D2");                                   }                                   return true;                               }                           }                       },                       codeTypeName:                        {                           editable : true,                           type:"string"                       }                   }               }           },           error: function(e) {               alert(e.errors);  // displays "Invalid query"               codeGridSource.cancelChanges();           }     });   (2)使用kendo自带的封装好的ajax请求来实现.

[html]  view plain  copy var dataSource = new kendo.data.DataSource(        {          transport : {            read : {                url : "xxx.json", //定义查询url               type : "POST"                },            create : {                url : "xxx.json", //定义新增url               type : "POST"                },                              update : {                url : "xxx.json", //定义修改url               type : "POST"                },            destroy : {                url : "xxx.json", //定义删除url               type : "POST"                },            parameterMap : function(options,operation) { //定义提交给后台携带的参数               var map = {};                if (operation !== "read") {                    return {                    models : kendo.stringify(options.models) //查询操作时返回的参数                   };                };                   if (options.take)                    map.take = options.take;                if (options.skip)                    map.skip = options.skip;                if (options.page)                    map.page = options.page;                if (options.pageSize)                    map.pageSize = options.pageSize;                if (!options.filter) {                }                else                {                                                      //设置查询条件和连接符                   options.filter = {                        logic : "and", //定义查询条件间的连接符                       filters : [                        {                            field : "startTime",                            value : $("#startTime").val() //查询条件的值的取值                       },                        {                            field : "endTime",                            value : $("#endTime").val()                        },                        {                            field : "fileName",                            value : $("#fileName").val()                        },                                                                        ]};                    var fi1 = {};                    var fi2 = [];                    var j = 0;                    $.each(options.filter.filters, function(i,element) {                        if (options.filter.filters[i].value)                        {                            fi2[j] = options.filter.filters[i];                            j++;                        }                    });                    if (fi2.length > 0)                    {                        fi1.filters = fi2;                        fi1.logic = options.filter.logic;                        map.filter = fi1;                    }                                         }                if (!options.sort)                { }                else                {                                                       //排序 选项的设置                   options.sort = [                    {                        field : $("#pageStyleSkinOrder0").val(),                        dir : $("#pageStyleSkinDir0").val()                    },                    {                        field : $("#pageStyleSkinOrder1").val(),                        dir : $("#pageStyleSkinDir1").val()                    }                    ];                    var fi3 = [];                    var j = 0;                    $.each(options.sort, function(i,element){                        if (options.sort[i].field) {                            fi3[j] = options.sort[i];                            j++;                        }                    });                    if (fi3.length > 0)                    {                        map.sort = fi3;                    }                }                   //操作为查询时提交给后台的参数                if (operation === "read")                {                    return {                        models : kendo.stringify(map)                    };                }                }            },            batch : true, //可批量操作           pageSize : 8, //每页显示条数设置           serverPaging : true, //支持分页功能           serverSorting : true,//支持排序功能            serverFiltering : true, //支持查询功能            schema : {                errors: function(response)                {                    return response.error; //错误信息显示               },                data : "list", //定义数据来源               total : "total", //页码总数               model : {                    id : "id", //id设置                   fields :                    {                                                                    //根据data中对象的字段来获取要获取的字段的值                       fileName :                            {                               editable : true, //设置为可编辑                              validation : //校验：不能为空                               {                                    required : true                                }                            },                        updateTime:                            {                               type:"date" //设置字段类型                           }                                            }                }            },            error: function(e) { //显示error信息               alert(e.errors);                 dataSource.cancelChanges();            }                                                  });