基于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 相关文章推荐
javascript之bind使用介绍
Oct 09 Javascript
jQuery中animate用法实例分析
Mar 09 Javascript
JS实现自定义简单网页软键盘效果代码
Nov 05 Javascript
原生js实现图片轮播特效
Dec 18 Javascript
bootstrap表格分页实例讲解
Dec 30 Javascript
vue与TypeScript集成配置最简教程(推荐)
Oct 17 Javascript
node文字生成图片的示例代码
Oct 26 Javascript
JavaScript常用截取字符串的三种方式用法区别实例解析
May 15 Javascript
layui实现点击按钮给table添加一行
Aug 10 Javascript
原生javascript的ajax请求及后台PHP响应操作示例
Feb 24 Javascript
vue 使用rules对表单字段进行校验的步骤
Dec 25 Vue.js
详解JavaScript中的执行上下文及调用堆栈
Apr 29 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环境搭建最新方法
2006/09/05 PHP
使用PHP批量生成随机用户名
2008/07/10 PHP
PHP小教程之实现双向链表
2014/06/12 PHP
WordPress中邮件的一些修改和自定义技巧
2015/12/15 PHP
PHP实现用session来实现记录用户登陆信息
2018/10/15 PHP
PHP中十六进制颜色与RGB颜色值互转的方法
2019/03/18 PHP
Laravel框架运行出错提示RuntimeException No application encryption key has been specified.解决方法
2019/04/02 PHP
Yii 使用intervention/image拓展实现图像处理功能
2019/06/22 PHP
javascript实现简单的省市区三级联动
2015/05/14 Javascript
Knockout自定义绑定创建方法
2015/12/26 Javascript
JavaScript位移运算符(无符号) &gt;&gt;&gt; 三个大于号 的使用方法详解
2016/03/31 Javascript
JavaScript结合Bootstrap仿微信后台多图文界面管理
2016/07/22 Javascript
微信小程序 SocketIO 实例讲解
2016/10/13 Javascript
vue2 如何实现div contenteditable=“true”(类似于v-model)的效果
2017/02/08 Javascript
vue项目中极验验证的使用代码示例
2019/12/03 Javascript
jQuery实现鼠标滑动切换图片
2020/05/27 jQuery
浅谈JavaScript中的“!!”作用
2020/08/03 Javascript
[02:08]2014DOTA2国际邀请赛 430专访:力争取得小组前二
2014/07/11 DOTA
python决策树之C4.5算法详解
2017/12/20 Python
使用Python进行体育竞技分析(预测球队成绩)
2019/05/16 Python
python生成随机红包的实例写法
2019/09/02 Python
Pytorch 实现sobel算子的卷积操作详解
2020/01/10 Python
咖啡为什么会有酸味?你喝到的咖啡為什麼是酸的?
2021/03/17 冲泡冲煮
文明礼仪小标兵事迹
2014/01/12 职场文书
初三物理教学反思
2014/01/21 职场文书
《飞向蓝天的恐龙》教学反思
2014/04/09 职场文书
售后服务承诺书模板
2014/05/21 职场文书
物资采购方案
2014/06/12 职场文书
求职自我推荐信
2014/06/25 职场文书
超市工作总结范文2014
2014/12/19 职场文书
干部考察材料范文
2014/12/24 职场文书
党员身份证明材料
2015/06/19 职场文书
社区干部培训心得体会
2016/01/06 职场文书
正则表达式拆分url实例代码
2022/02/24 Java/Android
Go 中的空白标识符下划线
2022/03/25 Golang
springboot入门 之profile设置方式
2022/04/04 Java/Android