使用EasyUI实现前端Tree与Tabs交互效果-优快云博客

本文介绍如何利用前端开发语言JavaScript和EasyUI库，结合Tree和Tabs组件，实现点击Tree节点弹出选项卡的效果。通过解压EasyUI官方Demo，找到相关案例，并在Eclipse中创建新包来加载控件。最后展示了实现这一功能的代码及实际效果。

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

tree的话顾名思义就是数形菜单如下图所示

我们接下来要使用tree和tabs也就是选项卡来实现点击弹出的效果

在easyUi官方下载的解压包找到dome找到tree案例

找到后我们进入eclipse中在使用tree控件时需要另起一个包来载入

引入好后接下来是代码展示实现前面所说的效果

	//页面载入函数  
	$(function() {
		//加载树的数据  ajax
		$('#myTree').tree({
			url : ctx + '/module.do',//请求地址servlet   
			animate : true,//让节点显示动画效果
			onDblClick : function(node) {//节点=对象
				//alert(node.text); // 在用户点击双击的时候提示
				//alert(node.iconCls);
				//alert(node.url);
				//判断是否是子节点
				var nodes = $('#myTree').tree('getChildren',node.target);
				//alert(nodes.length);
				if(nodes.length==0){//说明没有子节点
					//判断选项卡是否存在
					var f = $('#myTab').tabs('exists',node.text);
					if(!f){//说明不存在
						//不存在就新增加一个选项卡
						$('#myTab').tabs('add',{//iconCls:'icon-mini-refresh'    
						    title:node.text,//标题    
						    content:'<iframe width="100%" height="100%" scrolling="no" frameborder="0" src="'+node.url+'" ></iframe>',//内容    
						    closable:true,//是否可以关闭   
						    iconCls:node.iconCls//图标   
						   
						});  
					}
					else{//存在就让其对应选中
					 $('#myTab').tabs('select',node.text);
					}
				}
				
				//iframe内嵌框架
			}

		});
	})
</script>

效果图

tree的前端工作