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

原创 2013年12月02日 12:25:58

一、使用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>

效果












Ztree实现树形菜单

**zTree使用教程**在实际的项目开发中,主要使用zTree来进行异步加载数据,如果数据量大的话,这样可以大大的减少服务器的压力,初学zTree,费了很多心思,现在总结zTree的使用方法。 1...
  • laonayonghaifeisi
  • laonayonghaifeisi
  • 2016年08月07日 19:49
  • 1204

6.easyui+ztree案例:zTree树

做的就是西部区域面板中的树形导航图。 Easyui中也有树,但是这个树不够强大。 zTree性能非常好,功能强大。 介绍: l  什么是zTree呢? zTree是一...
  • xzm_rainbow
  • xzm_rainbow
  • 2013年11月21日 14:06
  • 4522

easyUI插件与ztree插件

Jquery easyui 1.3.2          easyui 主要组件 1、 Form 表单组件 2、 Grid 表格组件 table 3、 Layout 布局组件 4、 Menu and...
  • u011428274
  • u011428274
  • 2013年07月18日 09:40
  • 2905

easyUI和zTree的结合

  • 2013年11月08日 14:51
  • 1.61MB
  • 下载

3.easyui+ztree案例:使用easyui布局

1,首先在页面中引入easyui。 把需要的文件和文件夹复制到项目中: 在easyuidemo中建立演示文件,easyui_layout.jsp。 在这个页面中引入easyui需要的...
  • xzm_rainbow
  • xzm_rainbow
  • 2013年11月21日 13:44
  • 3818

Spring MVC关于ztree插件进行前后台交互

项目中需要对jquery的ztree插件进行前后台交互,开发过程中遇到了不少问题,完成后写写博客理一下思路。...
  • plcokefly100
  • plcokefly100
  • 2015年05月29日 16:14
  • 2064

使用Jquery zTree实现后台数据权限的添加

问题:项目开发需求:为后台用户添加数据权限控制。     数据权限控制是指:当新建后台用户时,为其添加可管辖公司信息(b_user_company)。当某个用户登录后台系统时,他只能查看和处理自己所...
  • u014746965
  • u014746965
  • 2016年04月22日 22:53
  • 1752

Ztree 树形菜单前后台演示

第一种写法:【Java 代码】 前端jsp页面: 第二种写法:
  • HL_smile90
  • HL_smile90
  • 2016年11月16日 11:40
  • 923

2.easyui+ztree案例:在项目中引入easyui

开发包目录结构: l  在项目中先导入jQuery的JS,再导入EasyUI的JS, jQuery.easyui.min.js ==easyloader.js+plugins/* 迷...
  • xzm_rainbow
  • xzm_rainbow
  • 2013年11月21日 13:38
  • 1682

easyui-accordion动态生成菜单的实现

暑假无聊,突然想起期末的模拟项目还没做完,当时就准备把菜单做成动态的,可惜因为某些原因没有完成,既然记起了就花点时间做了吧,以免我忘了       首先看完成的效果: 需求:一级菜单在登陆成功后就加...
  • J_Demon
  • J_Demon
  • 2015年08月03日 17:30
  • 11847
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:ztree的菜单显示与easyUI动态选项卡
举报原因:
原因补充:

(最多只允许输入30个字)