KendoUI:Grid控制項的使用，kendouigrid控制項

KendoUI:Grid控制項的使用，kendouigrid控制項

1.建立和基本選項配置

有兩種建立grid的方式,我這裡使用已存在的html div標籤,然後再將div元素kendo化.

<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請求.

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請求來實現.

var dataSource = new kendo.data.DataSource( {   transport : { read : { url : "xxx.json", //定義查詢urltype : "POST" }, create : { url : "xxx.json", //定義新增urltype : "POST" },                           update : { url : "xxx.json", //定義修改urltype : "POST" }, destroy : { url : "xxx.json", //定義刪除urltype : "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(); }    });