KendoUI:Grid控件的使用

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