基于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 相关文章推荐
JQUERY 浏览器判断实现函数
Aug 20 Javascript
JQuery调webservice实现邮箱验证(检测是否可用)
May 21 Javascript
jquery读写cookie操作实例分析
Dec 24 Javascript
JavaScript实现身份证验证代码
Feb 17 Javascript
jQuery中Datatables增加跳转到指定页功能
Feb 08 Javascript
JS和canvas实现俄罗斯方块
Mar 14 Javascript
详解Node.js 命令行程序开发教程
Jun 07 Javascript
详解vscode中vue代码颜色插件
Oct 11 Javascript
Javascript和jquery在selenium的使用过程
Oct 31 jQuery
Vue filter 过滤当前时间 实现实时更新效果
Dec 20 Javascript
通过实例解析javascript Date对象属性及方法
Nov 04 Javascript
前端vue+express实现文件的上传下载示例
Feb 18 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
array_multisort实现PHP多维数组排序示例讲解
2011/01/04 PHP
Zend的MVC机制使用分析(一)
2013/05/02 PHP
php设计模式之命令模式的应用详解
2013/05/21 PHP
Youku 视频绝对地址获取的方法详解
2013/06/26 PHP
ThinkPHP中RBAC类的四种用法分析
2014/11/24 PHP
php数组索引与键值操作技巧实例分析
2015/06/24 PHP
Yii控制器中filter过滤器用法分析
2016/07/15 PHP
javascript删除option选项的多种方法总结
2013/11/22 Javascript
jquery prop的使用介绍及与attr的区别
2013/12/19 Javascript
jquery中filter方法用法实例分析
2015/02/06 Javascript
Angular在一个页面中使用两个ng-app的方法(二)
2017/02/20 Javascript
浅谈angular2的http请求返回结果的subcribe注意事项
2017/03/01 Javascript
js 获取图像缩放后的实际宽高,位置等信息
2017/03/07 Javascript
jquery在vue脚手架中的使用方式示例
2017/08/29 jQuery
SVG动画vivus.js库使用小结(实例代码)
2017/09/14 Javascript
微信小程序实现页面跳转传值的方法
2017/10/12 Javascript
vue 手机物理监听键+退出提示代码
2020/09/09 Javascript
Python创建xml文件示例
2017/03/22 Python
Python中pow()和math.pow()函数用法示例
2018/02/11 Python
django 发送手机验证码的示例代码
2018/04/25 Python
python中使用ctypes调用so传参设置遇到的问题及解决方法
2019/06/19 Python
Python3 itchat实现微信定时发送群消息的实例代码
2019/07/12 Python
python破解bilibili滑动验证码登录功能
2019/09/11 Python
python多进程并行代码实例
2019/09/30 Python
EM Cosmetics官网:由彩妆大神Michelle Phan创办的独立品牌
2020/04/27 全球购物
大学生求职推荐信
2013/11/27 职场文书
好矿嫂事迹材料
2014/01/21 职场文书
市三好学生主要事迹
2014/01/28 职场文书
期末自我鉴定
2014/02/02 职场文书
2015年幼儿园毕业感言
2014/02/12 职场文书
遗产继承公证书
2014/04/09 职场文书
报表员工作失误检讨书范文
2014/09/19 职场文书
2014法制宣传日活动总结范文
2014/11/01 职场文书
2015年世界环境日活动总结
2015/02/11 职场文书
不同意离婚代理词
2015/05/23 职场文书
mybatis使用oracle进行添加数据的方法
2021/04/27 Oracle