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

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":"造房子專業"
	}]
}]
 

結束