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":"造房子专业"
	}]
}]

 

 

 

 

 

结束