EasyUI+zTree实现简单的树形菜单切换

Posted MR丶C

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了EasyUI+zTree实现简单的树形菜单切换相关的知识,希望对你有一定的参考价值。

使用easyui_ztree实现简单的树形菜单切换效果

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<!--导入juery核心配置文件-->
		<script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
		<!--导入easyui类库-->
		<script type="text/javascript" src="../js/easyui/jquery.easyui.min.js"></script>
		<!--导入默认主题css文件-->
		<link id="easyuiTheme" rel="stylesheet" type="text/css" href="../js/easyui/themes/default/easyui.css"/>
		<!--导入图标css文件-->
		<link rel="stylesheet" type="text/css" href="../js/easyui/themes/icon.css" />
		<!--导入国际化文件-->
		<script src="../js/easyui/locale/easyui-lang-zh_CN.js" type="text/javascript"></script>
		<!-- 引入 ztree -->
		<script src="../js/ztree/jquery.ztree.all-3.5.js" type="text/javascript" charset="utf-8"></script>
		<link rel="stylesheet" type="text/css" href="../js/ztree/zTreeStyle.css"/>
		
		<title></title>
		<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($("#mytabs").tabs(\'exists\',treeNode.name)){
								//选中选项卡
								$("#mytabs").tabs(\'select\',treeNode.name);
							}else{
								//如果没有打开,添加选项卡
								$("#mytabs").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:"子节点一"},
					{id:12,pId:1,name:"子节点二"},
					{id:13,pId:2,name:"腾讯",page:"http://www.qq.com/"},
					{id:14,pId:2,name:"百度",page:"http://www.baidu.com/"},
					{id:21,pId:11,name:"子节点"},
					{id:31,pId:21,name:"子节点"}
					
				];
				
				//3.生成菜单
				//$.fn.zTree.init($("#baseMenu"),setting,zNodes);
				$.fn.zTree.init($("#baseMenu"),setting, zNodes);
				
				
			//对选项卡注册右键事件
			$("#mytabs").tabs({
				onContextMenu:function(e,title,index){
					//阻止默认菜单显示
					e.preventDefault();
					
					//显示自定义右键菜单
					$("#mm").menu(\'show\',{
						left : e.pageX,
						top : e.pageY
					});
				}
			});
				
			});	
			
		</script>
		
	</head>
	<body class="easyui-layout">
		
			<div data-options="region:\'north\',title:\'xxxx管理系统\',split:true" style="height:100px;"></div>
			<div data-options="region:\'south\',title:\'South Title\',split:true" style="height:100px;"></div>
			
			<div data-options="region:\'west\',title:\'菜单导航\',split:true" style="width:200px;">
				
				<!--折叠面板-->
				<div class="easyui-accordion" data-options="fit:true">
					<div data-options="title:\'基础菜单\'">
						<!--<a href="javascript:void(0)" id="czbkLink">传智播客</a>-->
						<!--通过ztree插件制作树形菜单-->
						<ul id="baseMenu" class="ztree"></ul>
					</div>
					<div data-options="title:\'系统菜单\'">
					</div>
				</div>
				
			</div>
			<div data-options="region:\'center\',title:\'消息中心\'" style="padding:5px;background:#eee;">
				<!--选项卡面板-->
				<div id="mytabs" class="easyui-tabs" data-options="fit:true">   
				    <div data-options="title:\'选项卡面板一\',closable:true">选项卡面板一</div>				
				    <div data-options="title:\'选项卡面板二\',closable:true">选项卡面板二</div>
				</div>  

				
			</div>
		
		<!--菜单,初始化都是隐藏的-->
		<div id="mm" class="easyui-menu" style="width: 120px;">
			<div>关闭当前窗口</div>
			<div data-options="iconCls:\'icon-cancel\'">关闭其他窗口</div>
			<div class="menu-sep"></div> <!--分割线-->
			<div data-options="iconCls:\'icon-cancel\'">关闭全部窗口</div>
		</div>
		
	</body>
	
	
</html>

  效果如下

 

 

以上是关于EasyUI+zTree实现简单的树形菜单切换的主要内容,如果未能解决你的问题,请参考以下文章

jQuery+zTree加载树形结构菜单

zTree树形菜单交互选项卡效果实现

使用ztree展示树形菜单结构

制作一棵ztree

使用zTree插件构建树形菜单

easyUI用的树形菜单,父级菜单默认是打开的,但是父菜单和子菜单太多了我想让父菜单默认是合上的该怎么做