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
		} ]
	});