基于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 相关文章推荐
js loading加载效果实现代码
Nov 24 Javascript
jquery 插件实现图片延迟加载效果代码
Feb 06 Javascript
javascript运行机制之this详细介绍
Feb 07 Javascript
Javascript闭包实例详解
Nov 29 Javascript
BootStrap中关于Select下拉框选择触发事件及扩展
Nov 22 Javascript
js实现选项卡内容切换以及折叠和展开效果【推荐】
Jan 08 Javascript
javascript 判断一个对象为数组的方法
May 03 Javascript
JSON创建键值对(key是中文或者数字)方式详解
Aug 24 Javascript
Vue的事件响应式进度条组件实例详解
Feb 04 Javascript
D3.js实现拓扑图的示例代码
Jun 30 Javascript
jQuery实现table表格checkbox全选的方法分析
Jul 04 jQuery
JavaScript实现随机点名器
Mar 25 Javascript
利用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中文语义分析实现方法示例
2019/09/28 PHP
设定php简写功能的方法
2019/11/28 PHP
CI框架简单分页类用法示例
2020/06/06 PHP
用JQuery在网页中实现分隔条功能的代码
2012/08/09 Javascript
JavaScript闭包实例详解
2016/06/03 Javascript
Angular 4.x 路由快速入门学习
2017/05/03 Javascript
vue-music关于Player播放器组件详解
2017/11/28 Javascript
微信小程序使用audio组件播放音乐功能示例【附源码下载】
2017/12/08 Javascript
mockjs,json-server一起搭建前端通用的数据模拟框架教程
2017/12/18 Javascript
vuex中的 mapState,mapGetters,mapActions,mapMutations 的使用
2018/04/13 Javascript
jQuery简单判断值是否存在于数组中的方法示例
2018/04/17 jQuery
JavaScript基础教程之如何实现一个简单的promise
2018/09/11 Javascript
jQuery+vue.js实现的多选下拉列表功能示例
2019/01/15 jQuery
python实现数通设备端口监控示例
2014/04/02 Python
进一步了解Python中的XML 工具
2015/04/13 Python
python文件操作之目录遍历实例分析
2015/05/20 Python
Python中列表的一些基本操作知识汇总
2015/05/20 Python
Python实现堆排序的方法详解
2016/05/03 Python
python 写入csv乱码问题解决方法
2016/10/23 Python
django 按时间范围查询数据库实例代码
2018/02/11 Python
Python实现的基于优先等级分配糖果问题算法示例
2018/04/25 Python
Python实现iOS自动化打包详解步骤
2018/10/03 Python
Python 单元测试(unittest)的使用小结
2018/11/14 Python
Python Unittest根据不同测试环境跳过用例的方法
2018/12/16 Python
详解【python】str与json类型转换
2019/04/29 Python
Pyqt5实现英文学习词典
2019/06/24 Python
Python依赖包迁移到断网环境操作
2020/07/13 Python
澳大利亚正品化妆品之家:Cosmetic Capital
2017/07/03 全球购物
养成教育经验材料
2014/05/26 职场文书
迎国庆演讲稿
2014/09/15 职场文书
国王的演讲观后感
2015/06/03 职场文书
美容院管理规章制度
2015/08/05 职场文书
宝宝满月祝酒词
2015/08/10 职场文书
世界文化遗产导游词
2019/08/07 职场文书
JS数组的常用方法整理
2021/03/31 Javascript
python简单验证码识别的实现过程
2021/06/20 Python