在每个节点添加 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. spark基础知识

    1.Spark是什么? UCBerkeley AMPlab所开源的类HadoopMapReduce的通用的并行计算框架. dfsSpark基于mapreduce算法实现的分布式计算,拥有HadoopM ...

  2. C. Edgy Trees Codeforces Round #548 (Div. 2) 并查集求连通块

    C. Edgy Trees time limit per test 2 seconds memory limit per test 256 megabytes input standard input ...

  3. 看Linux 之父是如何定义 Linux？

    看Linux 之父是如何定义 Linux? LINUX是什么? LINUX是一个免费类unix内核,适用于386-AT计算机,附带完整源代码.主要让黑客.计算机科学学生使用,学习和享受.它大部分用C编 ...

  4. 16.ajax_case02

    # 抓取当当网书评 # http://product.dangdang.com/25340451.html import json import requests from lxml import e ...

  5. centos7下安装docker（17.1docker监控---sysdig）

    sysdig是一个轻量级的系统监控工具,同时原生支持容器.通过sysdig我们可以近距离观察linux操作系统和容器的行为 Linux上有很多常用的监控工具,比如;strace,tcpdump,hto ...

  6. 静默安装Oracle12.2数据库

    实验环境: 操作系统:Redhat 6.4 64位 数  据 库:Oracle 12c R2   一. 安装前准备 1. 创建用户和组 [root@wjq ~]# groupadd -g 1000 o ...

  7. P2256 一中校运会之百米跑（map+并查集）

    思路:首先处理名字,让字符串直接映射唯一一个数字,这就用map<string, int>即可. 然后,直接用并查集 #include<iostream> #include< ...

  8. Nginx 反向代理 -- 一路上的坑转载

    个人学习之用转子https://www.cnblogs.com/xjbBill/p/7477825.html 前些天刚过来新公司上班,公司的项目都挺多的,只不过项目都是第三方公司团队开发的,现在本公司 ...

  9. Spring Security（四）：2.1 Introduction What is Spring Security?

    Spring Security provides comprehensive security services for Java EE-based enterprise software appli ...

  10. Vue2.x源码学习笔记-Vue构造函数

    我们知道使用vue.js开发应用时,都是new Vue({}/*options*/) 那Vue构造函数上有哪些静态属性和方法呢?其原型上又有哪些方法呢? 一般我都会在浏览器中输入Vue来look se ...