在每个节点添加 id 和 pid， id 表示当前节点编号，pid 表示父节点编号

第一步：在页面显示菜单位置，添加 ul设置 class=”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数据格式支持

                         }

                     }

                 };

                 //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:"子节点三"},

                     {id:14,pId:2,name:"子节点四"}

                 ];

                 //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:'CSDN博客',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树形菜单交互选项卡效果实现

    1. 添加自定义属性 page 2. 为 ztree 每个树形节点,添加点击事件 <!DOCTYPE html> <html> <head> <meta ch ...

  2. ztree树形菜单demo

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

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

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

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

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

  5. javascript树形菜单简单实例

    参考博客地址:http://chengyoyo2006.blog.163.com/blog/static/8451734820087843950604/ <!DOCTYPE HTML PUBLI ...

  6. 默认展开ztree树形菜单

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

  7. thinkphp5 ztree树形菜单

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

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

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

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

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

随机推荐

  1. chrome的source工具

    http://www.cnblogs.com/ys-ys/p/5597717.html http://www.cnblogs.com/strick/p/5556434.html

  2. 2.03-handler_openner

    import urllib.request def handler_openner(): #系统的urlopen并没有添加代理的功能所以需要我们自定义这个功能 #安全 套接层 ssl第三方的CA数字证 ...

  3. centos7下kubernetes（7.kubernetesScale Up/Down）

    伸缩(Scale up/down)是指在线增加或减少pod副本数量 通过yml文件创建两个nginx的pod 先查看一下nginx的yml文件: 通过kubectl apply -f创建 通过kube ...

  4. 新手PHP连接MySQL数据库出问题（Warning: mysqli_connect(): (HY000/1045): Access denied for user 'root'@'localhost' (using password: YES)）

    我用的环境是wampServer集成的软件包 在php连接MySQL数据库的时候老是出现这个问题Warning: mysqli_connect(): (HY000/1045): Access deni ...

  5. nginx进行反向代理，80端口使用

    环境说明:centos7 安装版本:tengine2.2.2 实现目的: 想用本地80端口,代理其它服务器的非80端口,实现80端口复用 [root@tiaobanji conf]# cat ngin ...

  6. mybatis 常用

    1.新增时获得主键 <insert ...> <selectKey resultType="java.lang.Integer" keyProperty=&quo ...

  7. Linux 创建静态库(.a)和动态库(.so)

    0. 回顾一下 gcc 选项 ============================================== -E : 仅做预处理,例如去注释,宏展开,include 展开等 -S : ...

  8. [转]C#中基于GDI+(Graphics)图像处理系列之前言

    直接给出原文链接吧: C#中基于GDI+(Graphics)图像处理系列之前言 链接:https://pan.baidu.com/s/1zm5TCOHqkqEfiLZuqO0UMA 提取码:qz0h

  9. Hive执行sql文件

    方法1: hive -f sql文件 t.sql文件内容: ; 执行命令 hive -f t.sql 方法2: 进入hive shell, 执行source命令 进入hive 终端 $ hive hi ...

  10. F#.NET周报 2018第34周-Ionide下载量100万

    回顾一下过去一周F#和.NET最新相关信息   原文   新闻 Ionide 你在VS Code 上写F# 是离不开他的. ^^ 下载100万了 .NET Core 2.1.3发布,支持LTS版本(L ...