Rumah > Artikel > hujung hadapan web > 如何使用zTree树形菜单

如何使用zTree树形菜单

亚连asal: 2018-06-15 16:31:142011semak imbas

下面我就为大家分享一篇zTree树形菜单的使用实例，具有很好的参考价值，希望对大家有所帮助。

在每个节点添加 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">
  <p data-options="region:&#39;north&#39;,title:&#39;你我他学习吧-学习Java的好博客！&#39;" style="height:100px"></p>
  <p data-options="region:&#39;west&#39;,title:&#39;菜单导航&#39;" style="width:200px">
   <!--折叠面板-->
   <p class="easyui-accordion" data-options="fit:true">
    <p data-options="title:&#39;基础菜单&#39;">
     <!--通过ztree插件，制作树形菜单-->
     <ul id="baseMenu" class="ztree"></ul>
    </p>
    <p data-options="title:&#39;系统菜单&#39;">你我他学习吧</p>
   </p>
  </p>
  <p data-options="region:&#39;center&#39;,title:&#39;中部区域&#39;">
   <!--选项卡面板-->
   <p id="mytabs" class="easyui-tabs" data-options="fit:true">
    <p data-options="title:&#39;CSDN博客&#39;,closable:true">选项卡面板一</p>
    <p data-options="title:&#39;博客园&#39;,closable:true">选项卡面板二</p>
   </p>
  </p>
  <p data-options="region:&#39;east&#39;,title:&#39;东部区域&#39;" style="width:100px"></p>
  <p data-options="region:&#39;south&#39;,title:&#39;南部区域&#39;" style="height:100px"></p>
 </body>
</html>

上面是我整理给大家的，希望今后会对大家有帮助。

在vue中使用better-scroll滚动插件

在VUE + UEditor中如何实现单图片跨域上传功能

在vue中有关watch检测到不到对象属性的变化方面的问题

veloticy-ui实现文字动画效果

js中let和var定义变量的区别有哪些？

Nuxt.js Vue服务端渲染摸索

使用vue.js如何实现被选中的改变方法

使用AnglarJs实现上拉加载

jQuery 如何防止相同的事件快速重复触发的方法

Atas ialah kandungan terperinci 如何使用zTree树形菜单. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：JS回调函数实例Artikel seterusnya：JS实现浏览器打印、打印预览

Artikel berkaitan

Lihat lagi