ztree树形菜单与jQuery EasyUI的选项卡tabs结合使用

最新推荐文章于 2022-01-06 13:42:11 发布

public_sbw

最新推荐文章于 2022-01-06 13:42:11 发布

阅读量855

点赞数

分类专栏： jQuery EasyUi ztree 文章标签： ztree easyUI tabs

本文链接：https://blog.csdn.net/public_sbw/article/details/79697592

版权

jQuery EasyUi 同时被 2 个专栏收录

3 篇文章 0 订阅

订阅专栏

ztree

2 篇文章 0 订阅

订阅专栏

<script type="text/javascript">
	$(function(){
		//1.设置ztree菜单
		var setting={
			data:{
				simpleData:{
					enable:true  //简单json数据格式
				}
			},
			
			callback : {
				onClick : function(event, treeId, treeNode, clickFlag) {
					
					var content = '<div style="width:100%;height:100%;overflow:hidden;">'
						+ '<iframe src="'
						+ treeNode.page
						+ '" scrolling="auto" style="width:100%;height:100%;border:0;" ></iframe></div>';
					
					//没有page的树形菜单不打开选项卡
					if(treeNode.page != undefined && treeNode.page != "") {
						//如果选项卡已打开,选中已打开的选项卡
						if($("#tabs1").tabs("exists",treeNode.name)){
							//选中打开的选项卡
							$("#tabs1").tabs("select",treeNode.name);
						}else{
							//打开选项卡
							$("#tabs1").tabs("add",{
								title:treeNode.name,
								content:content,
								closable:true
							})
						}
					}
				}
			}
		}
		
		//2.制作ztree树形菜单
		var zNodes=[
		    {id:1,pId:0,name:'父节点一'},
		    {id:2,pId:0,name:'父节点二'},
		    {id:11,pId:1,name:'子节点一',page:"https://www.baidu.com"},
		    {id:12,pId:1,name:'子节点二',page:"http://www.163.com"},
		    {id:21,pId:2,name:'子节点一'},
		    {id:22,pId:2,name:'子节点二'}
		]
		
		//3.生成ztree树形菜单
		$.fn.zTree.init($("#baseMenu"), setting, zNodes);
	});
</script>
</head>
<body class="easyui-layout">
	<div data-options="region:'north', title:'北部区域', split:true" style="height:120px"></div>
	<div data-options="region:'south', title:'南部区域'" style="height:120px"></div>
	<div data-options="region:'center'">
		<div class="easyui-tabs" data-options="fit:true" id="tabs1">
			<div data-options="title:'选项卡一',closable:true">选项卡一</div>
			<div data-options="title:'选项卡二'">选项卡二</div>
		</div>
	</div>
	<div data-options="region:'west', title:'西部区域'" style="width:180px">
		<div class="easyui-accordion" data-options="fit:true">
			<div data-options="title:'基本属性'">
				<!-- 树形菜单 -->
				<ul id="baseMenu" class="ztree"></ul>
			</div>
			<div data-options="title:'面板二'">面板二</div>
		</div>
	</div>
</body>

具体使用：

zTree节点自带url属性会打开新的页面无法满足业务需求,所以设置自定义属性page

为ztree树形节点添加单击事件：

var setting={

callback : {

onClick : function(event,treeId,treeNode,clickFlag){

//没有page树形菜单,不打开选项卡

if(treeNode.page != undefined && treeNode.page != ""){

//如果选项卡打开

if($("#tabs").tabs("exists",treeNode.name)){

//选中选项卡

$("#tabs").tabs("select",treeNode.name);

}else{

//没有打开选项卡,添加选项卡

$("#tabs").tabs("add",{

}

}

}

}

}

}

public_sbw

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ztree树形菜单与jQuery EasyUI的选项卡tabs结合使用

&lt;script type="text/javascript"&gt; $(function(){ //1.设置ztree菜单 var setting={ data:{ simpleData:{ enable:true //简单json数据格式 } }, callback : { onClick : function(ev...
复制链接

扫一扫