1、 添加自定义属性 page 
2、 为 ztree 每个树形节点，添加点击事件

 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="UTF-8">

         <title>ztree树形菜单的使用</title>

         <!-- 导入jquery核心类库 -->

         <script type="text/javascript" src="../js/jquery-1.8.3.js"></script>

         <!-- 导入easyui类库 -->

         <link id="easyuiTheme" rel="stylesheet" type="text/css" href="../js/easyui/themes/default/easyui.css">

         <link rel="stylesheet" type="text/css" href="../js/easyui/themes/icon.css">

         <link rel="stylesheet" type="text/css" href="../css/default.css">

         <script type="text/javascript" src="../js/easyui/jquery.easyui.min.js"></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" />

         <script type="text/javascript">

             //页面加载后执行

             $(function() {

                 //1.进行ztree树形菜单设置，开启简单json数据支持

                 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:"CSDN博客",page:"http://blog.csdn.net/a772304419"},

                     {id:14,pId:2,name:"博客园",page:"http://www.cnblogs.com/niwotaxuexiba/"}

                 ];

                 //3.生成树形菜单

                 $.fn.zTree.init($("#baseMenu"),setting,zNodes);

             });

         </script>

     </head>

     <body class="easyui-layout">

         <div data-options="region:'north',title:'你我他学习吧-学习Java的好博客！'" style="height:100px"></div>

         <div data-options="region:'west',title:'菜单导航'" style="width:200px">

             <!--折叠面板-->

             <div class="easyui-accordion" data-options="fit:true">

                 <div data-options="title:'基础菜单'">

                     <!--通过ztree插件，制作树形菜单-->

                     <ul id="baseMenu" class="ztree"></ul>

                 </div>

                 <div data-options="title:'系统菜单'">你我他学习吧</div>

             </div>

         </div>

         <div data-options="region:'center',title:'中部区域'">

             <!--选项卡面板-->

             <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 data-options="region:'east',title:'东部区域'" style="width:100px"></div>

         <div data-options="region:'south',title:'南部区域'" style="height:100px"></div>

     </body>

 </html>

zTree树形菜单交互选项卡效果实现的更多相关文章

  1. zTree树形菜单使用实例

    在每个节点添加 id 和 pid, id 表示当前节点编号,pid 表示父节点编号 第一步:在页面显示菜单位置,添加 ul设置 class=”ztree” 第二步:开启简单数据格式支持 第三步:编写树 ...

  2. ztree树形菜单的增加删除修改和换图标

    首先需要注意一点,如果有研究过树形菜单,就会发现实现删除和修改功能特别简单,但是增加却有一点复杂.造成这个现象是ztree树形菜单的历史遗留问题.大概是之前的版本没有增加这个功能,后来的版本加上了这个 ...

  3. Bootstrap风格zTree树形菜单插件

    这是一款bootstrap风格jQuery zTree树形菜单插件,支持自定义编辑.添加列表菜单.删除列表等功能的jQuery树形菜单代码.在线演示 具体代码实现: <!DOCTYPE html ...

  4. ztree树形菜单demo

    阅读目录 zTree树形菜单 回到顶部 zTree树形菜单 树形菜单使用方式如下:HTML引入的方式如下: <!DOCTYPE html> <html> <head> ...

  5. 默认展开ztree树形菜单

    var setting = { view: { selectedMulti: false //按住ctrl是否可以多选 }, check: { enable: true , chkStyle: 'ch ...

  6. thinkphp5 ztree树形菜单

    教程:http://makaidong.com/zjfjava/4074_5873678.html 下载:https://github.com/zTree/zTree_v3

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

    使用easyui_ztree实现简单的树形菜单切换效果 <!DOCTYPE html> <html> <head> <meta charset="U ...

  8. react ant design TreeNode——树形菜单笔记

     2017-12-04补充说明——树形菜单版本号2.x 设置默认该树形组件展开(默认展开所有树节点) 参考文档的写法: defaultExpandAll={true} //经过测试并不生效, 另外注意 ...

  9. 使用zTree插件构建树形菜单

    zTree下载:https://github.com/zTree/zTree_v3 目录: 就我看来,zTree较为实用的有以下几点: zTree 是一个依靠 jQuery 实现的多功能 “树插件”. ...

随机推荐

  1. InfluxDB部署

    InfluxDB介绍 官网:https://www.influxdata.com/ 文档:https://docs.influxdata.com/influxdb/v1.2/introduction/ ...

  2. 在Eclipse中创建maven项目出现的环境警告 j2se-1.5

    Build path specifies execution environment J2SE-1.5. There are no JREs installed in the workspace th ...

  3. [matlab] 6.粒子群优化算法

    粒子群优化(PSO, particle swarm optimization)算法是计算智能领域,除了蚁群算法,鱼群算法之外的一种群体智能的优化算法,该算法最早由Kennedy和Eberhart在19 ...

  4. maven-resources-plugin插件关于占位符不生效问题

    插件版本: <plugin> <artifactId>maven-resources-plugin</artifactId> <version>3.0. ...

  5. How to get Pycharm

    PyCharm是一种Python IDE,带有一整套可以帮助用户在使用Python语言开发时提高其效率的工具,比如:代码跳转.智能提示.自动完成.单元测试.版本控制.此外,该IDE提供了一些高级功能, ...

  6. day14（2）---列表推导式、生成器推导式、字典推导式、三元表达式

    一.列表推导式: ls = [元素表达式 for i in 可迭代对象 if 筛选条件] 案例: # -*- coding: utf-8 -*- '''列表生成式练习''' # 练习一(三元表达式): ...

  7. PAT A1094 The Largest Generation （25 分）——树的bfs遍历

    A family hierarchy is usually presented by a pedigree tree where all the nodes on the same level bel ...

  8. 本地搭了http服务(localhost),怎么在vue环境下，通过axios获取到接口数据

    1. 找到 vue项目\config\index.js 文件 2. proxyTable: { '/api': { target: 'http://127.0.0.1:9420', changeOri ...

  9. Spark性能调优

    Spark性能优化指南——基础篇 https://tech.meituan.com/spark-tuning-basic.html Spark性能优化指南——高级篇 https://tech.meit ...

  10. Jlink使用技巧之读取STM32内部的程序

    前言 上一篇Jlink系列文章介绍了如何使用J-Flash来下载Hex或Bin文件到单片机,具体可参考Jlink使用技巧之单独下载HEX文件到单片机,本篇文章介绍,如何使用JFlash来读取单片机的程 ...