easyUI設置一個令人滿意的樹形下拉框combotree

什麼叫令人滿意的樹形下拉框：

1.父級節點不可選擇

2.單擊父級節點，可展開和關閉子級節點

 

效果展示：

 

 

代碼：

下拉框的佈局設置：

前臺是一個datagrid表格，在toolbar裏添加了一個text和一個查詢按鈕

 

$("#singleGrid").datagrid({
		//其他亂七八糟的樹形
		columns:[[    
				 //其他亂七八糟的屬性
			  ]],
		toolbar:[
				{
					//其他亂七八糟的按鈕
				},'-',{
					//這纔是重點☆☆☆☆☆
					text: '選擇院系:<select type="text" id="queryData"/>'
				},{
					id: 'btn4',
					text: '點擊查詢',
					iconCls: 'icon-search',
					handler: function(){
						//這樣可以獲取到我們的id
						var query_id = $("#queryData").combotree("getValue");
						alert(query_id);
					}
				}
				],	
})

 

 

 

樹形下拉框的設置

其次是樹形下拉框怎麼設置：

 

$("#queryData").combotree({
	width:'100%', 
	animate:true,
	url:'treegrid_data1.json',
	labelPosition:'top',
	onBeforeSelect:function(node){
		if(node.children){
			//先封裝成一個tree
			var t = $('#queryData').combotree('tree');
			//然後使用toggle
			t.tree('toggle',node.target);//注意和下一行的順序
			t.tree("unselect");
			//判斷node節點下是不是有childred？ 有：點擊的是一個父級菜單
			return;
		}
	}
})

 

 

 

json數據的編寫

我這裏使用的是測試數據，直接編寫的一個json

後期如果需要從數據庫中獲取數據。修改url即可。

 

[{
	"id":1,
	"text":"計算機與信息工程學院",
	"children":[{
		"id":11,
		"text":"計算機科學與技術"
	},{
		"id":12,
		"text":"物聯網工程"
	},{
		"id":13,
		"text":"軟件工程"
	}]
},{
	"id":2,
	"text":"建築工程學院",
	"state":"closed",
	"children":[{
		"id":21,
		"text":"建築專業"
	},{
		"id":22,
		"text":"測試專業"
	},{
		"id":23,
		"text":"造房子專業"
	}]
}]

 

 

 

 

 

結束