tree的前端工作

本文介绍如何利用前端开发语言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>

效果图

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值