Cinq étapes pour implémenter facilement des exemples d'utilisation de zTree

Cet article présente principalement cinq étapes pour mettre en œuvre facilement l'utilisation de zTree. Il a une certaine valeur de référence. Les amis intéressés peuvent s'y référer. J'espère qu'il pourra aider tout le monde.

1. Importez le fichier de configuration zTree

<script type="text/javascript" src="../js/ztree/jquery.ztree.all-3.5.js"></script> 
<link rel="stylesheet" href="../js/ztree/zTreeStyle.css" />

2. Définissez class="ztree"
à l'emplacement requis

<p data-options="title:&#39;基础菜单&#39;"> 
   <ul id="baseMenu" class="ztree"></ul> 
</p>

3. Choisissez de générer un format zTree simple ou un format zTree standard selon vos besoins (seulement simple ici) ps : Attention à bien écrire dans la fonction après la page est chargée.

var setting = { 
  data: { 
    simpleData: { 
      enable: true //支持json格式 
  } 
},

4. Écrivez un menu arborescent (simple et similaire à dTree)

<🎜. >

var zNodes = [ //驼峰式命名pId 
  {id:1,pId:0,name:"父节点1"},       
  {id:2,pId:0,name:"父节点2"},           
  {id:11,pId:1,name:"父1子节点1"}, 
  {id:12,pId:1,name:"父1子节点2"}, 
];

$.fn.zTree.init($("#baseMenu"), setting, zNodes);

Exemple détaillé de zTree jQuery Utilisation du plug-in d'arborescence

Explication de jQuery utilisant le plug-in zTree pour implémenter la fonction glisser-déposer

Partage sur l'utilisation du plug-in d'arborescence zTree dans jQuery

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!