ztree的菜单显示与easyUI动态选项卡

一、使用ztree完成树状菜单栏显示（开发准备ztree开发包下载）

介绍：zTree 是一个依靠 jQuery 实现的多功能 “树插件”。优异的性能、灵活的配置、多种功能的组合是zTree 最大优点。

（是jquery 插件 ，使用ztree 必须引入 jquery 的类库 ）

1、开发包目录结构：

api        使用文档说明

css       树样式文件

demo   使用案例

js          需要引入框架插件文件

2、开发引入

开发需引入：\JQuery zTree v3.5.15\js\jquery.ztree.all-3.5.js

以及：JQuery zTree v3.5.15\css\zTreeStyle\zTreeStyle.css

其中jquery-1.8.3.js为jquery的开发js，也是easyui需要的

在jsp文件中引入ztree

<script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery-1.8.3.js"></script>
<!-- 引入ztree -->
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/js/ztree/zTreeStyle.css">
<script type="text/javascript" src="${pageContext.request.contextPath }/js/ztree/jquery.ztree.all-3.5.js"></script>

3.开发ztree案例

学习ztree可结合ztree开发包中提供的demo来学习：JQuery zTree v3.5.15\demo\cn\index.html

标准数据树：

参考 demo/cn/core/standardData.htm

(1)在需要显示树的位置，提供<ul>节点

		<!-- 折叠面板 -->
		<div class="easyui-accordion" data-options="fit:true" > <!-- 本面板在本人博客的 easyUI的基本搭建与layout布局中有介绍 -->
			<!-- 每个div都是一个面板 -->
			<div data-options="title:'诸神',iconCls:'icon-help'" >
				<!-- 制作标准数据树 -->
				<ul class="ztree" id="basetree" ></ul>
			</div>

(2)在js代码中提供setting
(3)提供节点数据

(4)初始化树

<script type="text/javascript">
    $(function(){
        //setting （ztree配置，标准数据树，不需要任何配置）
        var setting = {};
        
        //数据zNodes,json格式
        var zNodes = [
               {name : '宙斯',
                   children : [ //childern 表示子节点
                       {name : '希腊'},
                       {name : '诸神之王'}
               ]}, //每一个{}表示一个节点
               {name : '阿波罗',
                   children:[
                       {name : '太阳神'}
            ]},
               {name : '波塞冬'}
        ];
        //初始化树
        $.fn.zTree.init($('#basetree'),setting,zNodes);
    });
</script>

效果：

简单数据树：

参考demo/cn/core/simpleData.html

(1)在需要显示树的位置，提供<ul>节点

		<!-- 折叠面板 -->
		<div class="easyui-accordion" data-options="fit:true" >
			<!-- 每个div都是一个面板 -->
			<div data-options="title:'诸国'" >
                            <!-- 制作简单数据树 -->
                            <ul class="ztree" id="simpletree" ></ul>
                        </div>

(2)在js代码中提供setting
(3)提供节点数据

(4)初始化树

<script type="text/javascript">
    $(function(){
        //setting设置
        var setting = {
                data : {
                    simpleData : {
                        enable : true //启用简单数据格式,其他参数可参照api自行设定（其实这样就行了）
                    }
                }
        };
        //数据
        var zNodes = [
            {id:1, pId:0, name:'英国'},      //id唯一标识，pId父节点：0表示该节点为顶级结点        
            {id:11, pId:1, name:'伦敦'},              
            {id:111, pId:11, name:'奥运会'},              
            {id:2, pId:0, name:'冰岛'},              
            {id:3, pId:0, name:'法国'},              
            {id:31, pId:3, name:'法西斯'},              
        ];
        //初始化树
        $.fn.zTree.init($('#simpletree'),setting,zNodes);
    });
</script>

效果：

注意：这几个菜单点击后是无效果的...

4.ztree与easyUI结合完成点击菜单弹出动态选项卡
允许点击，点击后弹出新的选项卡（在setting中设置）

js中的代码：

<script type="text/javascript">
    $(function(){
       var setting = {
                data : {
                    simpleData : {
                        enable : true //启用简单数据格式,其他参数可参照api自行设定（其实这样就行了）
                    }
                },
                callback : {
                    onClick : function(event,treeId,treeNode,clickFlag){  //treeNode代表节点数据，可参照ztree中的api
                        if(treeNode.click==false){   //click为false不可以进行点击
                            return ;
                        }
                        //在tabs选项卡添加一个新的选项卡
                        if($('#mytabs').tabs('exists',treeNode.name)){ //treeNode.name对应数据zNodes中的name
                            //如果存在选项卡，切换到该选项卡中
                            $('#mytabs').tabs('select',treeNode.name);
                        }else{
                            //如果不存在选项卡，添加新的选项卡
                            $('#mytabs').tabs('add',{
                                title : treeNode.name,
                                content : '<div style="width:100%;height:100%;overflow:hidden;">'
                                    + '<iframe src="'
                                    + treeNode.page
                                    + '" scrolling="auto" style="width:100%;height:100%;border:0;" ></iframe></div>', // 可以局部刷新tab选项卡
                                closable : true //提供关闭选项卡的按钮                                  
                            });                
                        }                            
                    }                    
                }                
        };
        //数据
        var zNodes = [
            {id:1, pId:0, name:'英国'},      //id唯一标识，pId父节点：0表示该节点为顶级结点        
            {id:11, pId:1, name:'伦敦'},              
            {id:111, pId:11, name:'回锅菜鸟的博客',page:'http://blog.csdn.net/u012814041'},              
            {id:2, pId:0, name:'冰岛',click:false},      //click:false 表示该选项卡不可以进行点击        
            {id:3, pId:0, name:'法国'},              
            {id:31, pId:3, name:'百度',page:'http://www.baidu.com'},              
        ];
        //初始化树
        $.fn.zTree.init($('#simpletree'),setting,zNodes);
    });
</script>

body中的代码

<body class="easyui-layout">
	<div region="north" title="北国风光" style="height:100px;" >北部</div>
	<div data-options="region:'south',title:'南海观音'" style="height: 80px;">南部</div>
	<div data-options="region:'center'">
		<!-- 这是一个选项卡布局 -->
		<div id="mytabs" class="easyui-tabs" data-options="fit:true">
			<!-- 每一个div 就是一个选项卡 -->
			<div data-options="title:'选项卡一',iconCls:'icon-ok'">内容一</div>
			<div data-options="title:'选项卡二',closable:true">内容二</div>
			<div data-options="title:'选项卡三'">内容三</div>
		</div>
	</div>
	<div data-options="region:'west',title:'西方世界'" style="width:200px;" >
		<!-- 折叠面板 -->
		<div class="easyui-accordion" data-options="fit:true" >
			<!-- 每个div都是一个面板 -->
			<div data-options="title:'诸神',iconCls:'icon-help'" >
				<!-- 制作标准数据树 -->
				<ul class="ztree" id="basetree" ></ul>
			</div>
			<div data-options="title:'诸国'" >
				<!-- 制作简单数据树 -->
				<ul class="ztree" id="simpletree" ></ul>
			</div>
			<div data-options="title:'遗迹'" >金字塔</div>
		</div>
	</div>
</body>

效果：