recherche

Maison >interface Web >js tutoriel >Explication détaillée des étapes d'utilisation du menu arborescent de zTree

Explication détaillée des étapes d'utilisation du menu arborescent de zTree

php中世界最好的语言
php中世界最好的语言original
2018-04-13 16:30:511775parcourir

Cette fois, je vais vous donner une explication détaillée des étapes d'utilisation du menu arborescent de zTree Quelles sont les précautions lors de l'utilisation du menu arborescent de zTree Voici un cas pratique, jetons un coup d'œil. .

Ajoutez un identifiant et un pid à chaque nœud, l'identifiant représente le numéro de nœud actuel et pid représente le numéro de nœud parent

Étape 1 : Ajoutez ulsetting class="ztree"

dans la position du menu d'affichage de la page Étape 2 : Activer la prise en charge du format de données simple

Étape 3 : Écrire les données du menu arborescent

Étape 4 : Générer un menu arborescent 

<!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;PHP&#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;PHP&#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>

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de PHP !

Lecture recommandée :

Parcel.js+Vue 2.x méthode de packaging de configuration rapide

JSONAPI en PHP Comment utiliser

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Comment créer un composant récursif dans un menu arborescent dans Vue.jsArticle suivant：Comment créer un composant récursif dans un menu arborescent dans Vue.js

Articles Liés

Voir plus