【combotree】easyui的combotree(树形下拉框)使用总结

最新推荐文章于 2021-04-17 16:51:33 发布

weixin_34301132

最新推荐文章于 2021-04-17 16:51:33 发布

阅读量2.8k

点赞数 1

文章标签： javascript python json ViewUI

原文链接：https://my.oschina.net/u/1540325/blog/780751

版权

本文介绍了EasyUI的combotree（树形下拉框）的创建、取值、设置值的方法，以及解决多个combotree在同一页面加载相同数据时出现的问题。重点讲解了loadData方法加载JSON数据的格式要求，onSelect事件获取选中值，以及通过onShowPanel事件避免加载冲突。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

2019独角兽企业重金招聘Python工程师标准>>>

引言

最近由于工作的需要，需要使用到下拉树，就是我们有一个输入框，用户要输入东西，但是输入的东西是从我们那个之中选的，为了防止用户输入错误，我们使用了下拉树，因为为一个树形列表，用户选择点击树形列表的哪一个，哪一个就会上去。combotree,效果如下：

1.创建combotree

我们知道easyui的每一个控件创建都有两种方法，combotree也不例外，一种是使用html标签直接初始化，一种是使用javascript方法实现。

a.html标签实现

<select id="cc" class="easyui-combotree" style="width:200px;"
    data-options="url:'get_data.php',required:true">
</select>

b.javascript创建

<input id="cc" value="01">

$('#cc').combotree({
   url: 'get_data.php',
   required: true
});

可以看得出，这儿加载数据都是在初始化的时候，直接去服务器请求，然后easyui自己加载的，其实就是加载json数据，但是我们写项目一般都是先用ajax请求下来，然后在本地加载该js对象，所以我们一般使用loadData来加载数据：

$('#addEmailform #ifinereportCptNameUrl').combotree('loadData',data );

值得注意的是：该数据的格式，必须是如下：

var data=[{id: 1,
	text: 'Languages',
	children: [{
		id: 11,
		text: 'Java'
	},{
		id: 12,
		text: 'C++'
	}]
   }]

就是初始化的时候请求远程的数据，该数据也一样需要是这个格式。

2.取值

其实有很多种方法，下面举两种

a.combotree的onSelect事件中就可以得到

$('#addEmailform #ifinereportCptNameUrl').combotree({
	required: true,
	width:350,
	height:35,
	onSelect :function(node){
			alert(node.id+node.text)		    				
	}
					    			
 });

上述方法，

最低0.47元/天解锁文章