基于zTree树形菜单的使用实例


Posted in Javascript onDecember 25, 2017

在每个节点添加 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" rel="external nofollow" >
  <link rel="stylesheet" type="text/css" href="../js/easyui/themes/icon.css" rel="external nofollow" >
  <link rel="stylesheet" type="text/css" href="../css/default.css" rel="external nofollow" >
  <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" rel="external nofollow" />
  <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树形菜单的使用实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
TextArea不支持maxlength的解决办法(jquery)
Sep 13 Javascript
iframe的父子窗口之间的对象相互调用基本用法
Sep 03 Javascript
Jquery easyui开启行编辑模式增删改操作
Jan 14 Javascript
JavaScript利用HTML DOM进行文档操作的方法
Mar 28 Javascript
jQuery实现的瀑布流加载效果示例
Sep 13 Javascript
Angular中使用$watch监听object属性值的变化(详解)
Apr 24 Javascript
seajs中模块依赖的加载处理实例分析
Oct 10 Javascript
全面介绍vue 全家桶和项目实例
Dec 27 Javascript
如何安装控制器JavaScript生成插件详解
Oct 21 Javascript
Vue v-for中的 input 或 select的值发生改变时触发事件操作
Aug 31 Javascript
js实现移动端轮播图滑动切换
Dec 21 Javascript
如何在 Vue 中使用 JSX
Feb 14 Vue.js
利用jQuery+localStorage实现一个简易的计时器示例代码
Dec 25 #jQuery
用 Vue.js 递归组件实现可折叠的树形菜单(demo)
Dec 25 #Javascript
详解vue-cli之webpack3构建全面提速优化
Dec 25 #Javascript
jQuery EasyUI 选项卡面板tabs的使用实例讲解
Dec 25 #jQuery
zTree树形菜单交互选项卡效果的实现方法
Dec 25 #Javascript
jQuery EasyUI 折叠面板accordion的使用实例(分享)
Dec 25 #jQuery
Vue.js递归组件构建树形菜单
Dec 24 #Javascript
You might like
PHP提取中文首字母
2008/04/09 PHP
php中CI操作多个数据库的代码
2012/07/05 PHP
PHP实现手机归属地查询API接口实现代码
2012/08/27 PHP
用php随机生成福彩双色球号码的2种方法
2013/02/04 PHP
PHP Cookie的使用教程详解
2013/06/03 PHP
PHP实现基于mysqli的Model基类完整实例
2016/04/08 PHP
php实现统计二进制中1的个数算法示例
2018/01/23 PHP
js window.event对象详尽解析
2009/02/17 Javascript
js URL参数的拼接方法比较
2012/02/15 Javascript
获取数组中最大最小值方法js代码(自写)
2013/08/12 Javascript
javascript自定义函数参数传递为字符串格式
2014/07/29 Javascript
jQuery+PHP实现动态数字展示特效
2015/03/14 Javascript
jquery实现可旋转可拖拽的文字效果代码
2016/01/27 Javascript
分享两段简单的JS代码防止SQL注入
2016/04/12 Javascript
JavaScript Ajax编程 应用篇
2016/07/02 Javascript
JavaScript仿微博输入框效果(案例分析)
2016/12/06 Javascript
jQuery获取选中单选按钮radio的值
2016/12/27 Javascript
js根据json数据中的某一个属性来给数据分组的方法
2018/10/08 Javascript
JavaScript数组常用的增删改查与其他属性详解
2020/10/13 Javascript
详解Python装饰器由浅入深
2016/12/09 Python
python bottle框架支持jquery ajax的RESTful风格的PUT和DELETE方法
2017/05/24 Python
Python中的二维数组实例(list与numpy.array)
2018/04/13 Python
pyspark 读取csv文件创建DataFrame的两种方法
2018/06/07 Python
Python基于分析Ajax请求实现抓取今日头条街拍图集功能示例
2018/07/19 Python
编写多线程Python服务器 最适合基础
2018/09/14 Python
使用Python自动化破解自定义字体混淆信息的方法实例
2019/02/13 Python
Python流行ORM框架sqlalchemy安装与使用教程
2019/06/04 Python
python-序列解包(对可迭代元素的快速取值方法)
2019/08/24 Python
Python的形参和实参使用方式
2019/12/24 Python
英国最大的宝石首饰超市:QP Jewellers
2018/09/23 全球购物
What is the purpose of Void class? Void类的作用是什么?
2016/10/31 面试题
python实现三阶魔方还原的示例代码
2021/04/28 Python
pytorch 梯度NAN异常值的解决方案
2021/06/05 Python
浅谈MySQL next-key lock 加锁范围
2021/06/07 MySQL
如何利用golang运用mysql数据库
2022/03/13 Golang
spring boot实现文件上传
2022/08/14 Java/Android