Kendo UI 之 TreeList学习

Kendo Ui 控件之TreeList

• columns 字段列表
  1. columns.attributes:字段样式

  columns: [ { field: "name",// 字段名 attributes: { "class": "name-cell", // 自定义Class style: "text-align: right" // 自定义样式 }

    1. columns.command:定义每行的默认按钮
        ```
        columns: [ {
        	field:"name",
        	attributes:{
        		"class" :"formatInfo",
        		style:"background-color:red"
        	}
        },{command:["edit","destroy"]} ]  // 默认每行生成edit按钮，delete按钮

    1. command的自定义动作
        ```
        command:[{
    		name:"editInfo", // 控件名字
    		text:"编辑",    // 页面表示内容
    		click:function(e){ // 定义动作
    			alert(1);
    		}
        },{
    		name:"editInfo",
    		text:"删除",
    		click:function(e){
    			alert(2);
    		}

    }]} ],	

        1. 定义按钮的样式
        ```
        command:[{
        		name:"editInfo",
        		text:"编辑",
        		className:"btnStyle", // class名
        		click:function(e){
        			alert(1);
        		}
        }]

1. columns.editor:字段编辑模式的时候触发的事件
    ```
editor:function(container, options){
            // create an input element
            var input = $("<input/>");
            // set its name to the field to which the column is bound ('name' in this case)
            input.attr("name", options.field);
            // append it to the container
            input.appendTo(container);
            // initialize a Kendo UI AutoComplete
            input.kendoAutoComplete({
                dataTextField: "name",
                dataSource: [
                    { name: "Jane Doe" },
                    { name: "Maria Anders" }
                ]
            });
		}

   1. columns.encoded: 是否直接支持HTML定义的内容，默认值为true
        ```
   // dataSource:数据来源
    var dataSource = new kendo.data.TreeListDataSource({
        data: [ { name: "<strong>Jane Doe</strong>" }, { name: "<strong>Jane Doe</strong>" }]
      });
    columns: [ {
        	field:"name",
        	encoded:false, // false的情况下可以在dataSource
        	attributes:{
        		"class" :"formatInfo",
        		style:"background-color:red"
        	},

1. columns.expandable: 展示二级菜单，默认值为false
    ```
 $("#treeList").kendoTreeList({
    columns: [
        { field: "name" },
        { field: "age", expandable: true } // true的情况下显示二级菜单
    ],
    dataSource: {
        data: [
            { id: 1, parentId: null, name: "Jane Doe", age: 22 }, 
            { id: 2, parentId: 1, name: "John Doe", age: 24 } // 利用parentId来显示数据
        ]
    }
});

    1. columns.filterable: true的情况下显示过滤菜单，默认为false
        ```
    treeListInfo = $("#treeList").kendoTreeList({
    	  columns: [
    	            { field: "name", filterable: false  // 用于单字段},
    	            { field: "age" }
    	          ],
    	          filterable: true, // 用于整个grid
    	          dataSource: [ { name: "Jane", age: 30 }, { name: "John", age: 33 }]
    	        });

1. columns.filterable.ui:自定义比较控件

    treeListInfo = $("#treeList").kendoTreeList({
    	  columns: [
    	            { field: "name", filterable: false },
    	            { field: "age" }
    	          ],
    	          filterable:{
    	        	  ui:"combobox" // 定义比较控件
    	          },

    	          filterable:{
    	        	  ui:function(element){
    	        		  element.kendoDateTimePicker(); // 利用函数初期化
    	        	  }
    	          },

    	          dataSource: [ { name: "Jane", age: 30 }, { name: "John", age: 33 }]
    	        });

1. columns.footerTemplate 自定义显示内容
    ```

treeListInfo = $("#treeList").kendoTreeList({ columns : [ { field : "name" }, { field : "age", footerTemplate : "Min: #: min # Max: #: max #" // 显示最小值和最大值 } ], dataSource : { data : [ { id : 1, parentId : null, name : "Jane Doe", age : 30 }, { id : 2, parentId : 1, name : "John Doe", age : 33 }, { id : 3, parentId : 1, name : "Joseph Doe", age : 42 } ], aggregate : [ { field : "age", aggregate : "min" // average：平均值 count ：统计个数 sum：合计 }, { field : "age", aggregate : "max" } ] } });

    1. columns.format：对字段的格式化处理
        ```
	treeListInfo = $("#treeList").kendoTreeList({
		columns : [ {
			field : "date",
			format : "{0: yyyy年MM月dd日}"     // 对日期的格式化
		}, {
			field : "number",     
			format : "{0:c}"    // 对数字的格式化，货币格式化
		} ],
		dataSource : [ {
			date : new Date(),
			number : 3.1415
		} ]
	});

1. columns.headerAttributes：对header字段的样式处理

	treeListInfo = $("#treeList").kendoTreeList({
		columns : [ {
			field : "date",
			headerAttributes:{
		        "class": "name-header",  // 字段加粗
		        style: "text-align: right"    // 字段右对齐
			},
			format : "{0: yyyy年MM月dd日}"
		}, {
			field : "number",
			format : "{0:c}"
		} ],
		dataSource : [ {
			date : new Date(),
			number : 3.1415
		} ]
	});

转载于:https://my.oschina.net/u/1858909/blog/769970