Heim > Artikel > Web-Frontend > So verwenden Sie das zTree-Baummenü

So verwenden Sie das zTree-Baummenü

亚连Original: 2018-06-15 16:31:142011Durchsuche

Im Folgenden werde ich Ihnen ein Beispiel für die Verwendung des zTree-Baummenüs vorstellen, das einen guten Referenzwert hat und ich hoffe, dass es für alle hilfreich sein wird.

Fügen Sie ID und PID zu jedem Knoten hinzu, ID stellt die aktuelle Knotennummer dar und PID stellt die Nummer des übergeordneten Knotens dar

Schritt 1: Ein Zeigen Sie auf der Seite die Menüposition an und fügen Sie die ul-Einstellung class="ztree" hinzu

Schritt 2: Aktivieren Sie die Unterstützung für einfache Datenformate

Schritt 3: Baummenüdaten schreiben

Vierter Schritt : Baummenü erstellen

<!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>

Das Obige habe ich für alle zusammengestellt. Ich hoffe, dass es in Zukunft für alle hilfreich sein wird.

Verwandte Artikel:

Better-Scroll-Bildlauf-Plug-in in Vue verwenden

So implementieren Sie Einzelbilder domänenübergreifend in VUE + UEditor-Upload-Funktion

Probleme in Vue, weil Watch Änderungen in Objekteigenschaften nicht erkennen kann

veloticy-ui implementiert Textanimationseffekte

Was sind die Unterschiede zwischen let und var, die Variablen in js definieren?

Erkunden des serverseitigen Renderings von Nuxt.js Vue

So verwenden Sie vue.js, um die ausgewählte Änderungsmethode zu implementieren

Verwendung von AnglarJs zum Implementieren des Pull-up-Ladens

So verhindern Sie, dass dasselbe Ereignis schnell und wiederholt mit jQuery ausgelöst wird

Das obige ist der detaillierte Inhalt vonSo verwenden Sie das zTree-Baummenü. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Beispiel für eine JS-RückruffunktionNächster Artikel：Beispiel für eine JS-Rückruffunktion

In Verbindung stehende Artikel

Mehr sehen