jQuery zTree charge le menu arborescent function_jquery

Comme le projet devait concevoir une fonction de menu arborescent, j'ai recherché des informations pertinentes sur Baidu et j'ai découvert qu'il y avait beaucoup d'informations sur zTree, ce que j'ai trouvé plutôt bien. De plus, zTree a également un document API officiel, qui a été présenté en détail. Après quelques ennuis, je l'ai finalement compris, alors je l'ai écrit, ce qui peut être considéré comme un résumé de l'apprentissage de zTree.

Présentation de zTree :

1. zTree utilise le code principal de JQuery pour implémenter un ensemble de plug-ins Tree qui peuvent compléter les fonctions les plus courantes

2. zTree v3.0 divise le code principal en fonction des fonctions, et le code inutile n'a pas besoin d'être chargé

3. Grâce à la technologie de chargement paresseux, des dizaines de milliers de nœuds peuvent être chargés facilement, et même sous IE6, il peut essentiellement être tué instantanément

4. Compatible avec IE, FireFox, Chrome, Opera, Safari et autres navigateurs

5. Prise en charge des données JSON

6. Prise en charge du chargement statique et asynchrone Ajax des données de nœud

7. Prend en charge tout changement de skin/icône personnalisée (en s'appuyant sur CSS)

8. Prise en charge d'une case à cocher ou d'une fonction de sélection radio extrêmement flexible

9. Fournissez plusieurs rappels de réponse à des événements

10. Fonctions d'édition flexibles (ajouter/supprimer/modifier/vérifier), vous pouvez faire glisser et déposer des nœuds à volonté, et vous pouvez glisser et déposer plusieurs nœuds

11. Plusieurs instances d'arbre peuvent être générées simultanément sur une seule page

Introduction aux fonctions et attributs de base :

Core :zTree(paramètre, [zTreeNodes])

Cette fonction accepte un paramètre d'objet de données au format JSON et un objet de données au format JSON zTreeNodes pour créer un arbre.

Paramètres de base : réglage

La configuration des paramètres de zTree se fait ici. En termes simples : le style de l'arborescence, les événements, les chemins d'accès, etc. sont tous configurés ici

var setting = { 
  showLine: true, 
  checkable: true 
 };

Parce qu'il y a trop de paramètres, veuillez consulter zTreeAPI

Paramètres de base :zTreeNodes

L'ensemble de la collecte de données des nœuds de zTree adopte une structure de données composée d'objets JSON Pour faire simple : toutes les informations de l'arborescence sont enregistrées au format Json

1. Site officiel de zTree : http://www.ztree.me/v3/main.php#_zTreeInfo

Vous pouvez télécharger le code source, les exemples et l'API de zTree sur le site officiel. L'API de l'auteur en pdf est très détaillée

À propos des méthodes d'acquisition de données des nœuds zTree sont divisées en statiques (définition directe) et dynamiques (chargement de la base de données backend)

Étapes de configuration détaillées :

La première étape - Introduire les fichiers pertinents

<link rel="stylesheet" href="ztree/css/zTreeStyle/zTreeStyle.css" type="text/css">
<script type="text/javascript" src="js/jQuery/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="ztree/js/jquery.ztree.core-3.5.min.js"></script>
<script type="text/javascript" src="ztree/js/jquery.ztree.excheck-3.5.min.js"></script>

Remarques :

1) Le premier (zTreeStyle.css) est le fichier CSS de style de zTree. Ce n'est qu'en l'introduisant que le style de la structure arborescente peut être présenté,

2), le deuxième (jquery-1.9.1.min.js) est le fichier jQuery, car il doit être utilisé,

3), le troisième (jquery.ztree.core-3.5.min.js) est le fichier core js de zTree, c'est nécessaire,

4), le dernier (js/jquery.ztree.excheck-3.5.min.js) est un fichier d'extension, principalement utilisé pour les fonctions de boutons radio et de cases à cocher. Parce que des cases à cocher sont utilisées, il l'est également. Il faut l'introduire.

La deuxième étape ——Configuration associée (pour une configuration détaillée spécifique, veuillez vous référer au site officiel pour une documentation détaillée de l'API)

var zTree;
var setting = {
 view: {
  dblClickExpand: false,//双击节点时，是否自动展开父节点的标识
  showLine: true,//是否显示节点之间的连线
  fontCss:{'color':'black','font-weight':'bold'},//字体样式函数
  selectedMulti: false //设置是否允许同时选中多个节点
 },
 check:{
  //chkboxType: { "Y": "ps", "N": "ps" },
  chkStyle: "checkbox",//复选框类型
  enable: true //每个节点上是否显示 CheckBox 
 },
 data: {
  simpleData: {//简单数据模式
   enable:true,
   idKey: "id",
   pIdKey: "pId",
   rootPId: ""
  }
 },
 callback: {
  beforeClick: function(treeId, treeNode) {
   zTree = $.fn.zTree.getZTreeObj("user_tree");
   if (treeNode.isParent) {
    zTree.expandNode(treeNode);//如果是父节点，则展开该节点
   }else{
    zTree.checkNode(treeNode, !treeNode.checked, true, true);//单击勾选，再次单击取消勾选
   }
  }
 }
};

La troisième étape - Charger les données des nœuds et présenter une arborescence

1) Sur la page html, il suffit de mettre un ul directement, et les données seront éventuellement automatiquement chargées dans l'élément ul

<body>
 <div class="zTreeDemoBackground left">
  <ul id="user_tree" class="ztree" style="border: 1px solid #617775;overflow-y: scroll;height: 500px;"></ul>
 </div>
</body>

2), chargement des données en js

1. Méthode statique (définition directe)

var zNodes =[
 { id:1, pId:0, name:"test 1", open:false},
 { id:11, pId:1, name:"test 1-1", open:true},
 { id:111, pId:11, name:"test 1-1-1"},
 { id:112, pId:11, name:"test 1-1-2"},
 { id:12, pId:1, name:"test 1-2", open:true},
     ];
     
$(document).ready(function(){
 $.fn.zTree.init($("#user_tree"), setting, zNodes);
});
function onCheck(e,treeId,treeNode){
 var treeObj=$.fn.zTree.getZTreeObj("user_tree"),
 nodes=treeObj.getCheckedNodes(true),
 v="";
 for(var i=0;i<nodes.length;i++){
  v+=nodes[i].name + ",";
  alert(nodes[i].id); //获取选中节点的值
 }
}

2. Méthode dynamique (chargement depuis la base de données en arrière-plan)

/**
 * 页面初始化
 */
$(document).ready(function(){
 onLoadZTree();
});

/**
 * 加载树形结构数据
 */
function onLoadZTree(){
 var treeNodes;
 $.ajax({
  async:false,//是否异步
  cache:false,//是否使用缓存
  type:'POST',//请求方式：post
  dataType:'json',//数据传输格式：json
  url:$('#ctx').val()+"SendNoticeMsgServlet?action=loadUserTree",//请求的action路径
  error:function(){
   //请求失败处理函数
   alert('亲，请求失败！');
  },
  success:function(data){
//  console.log(data);
   //请求成功后处理函数
   treeNodes = data;//把后台封装好的简单Json格式赋给treeNodes
  }
 });
 
 var t = $("#user_tree");
 t = $.fn.zTree.init(t, setting, treeNodes);
}

Code de données de chargement en arrière-plan Java :

1. Définissez la classe VO de l'arbre. Vous n'avez pas besoin de définir cela, car je dois utiliser d'autres opérations, ce qui est plus pratique

/**
 * zTree树形结构对象VO类
 * 
 * @author Administrator
 * 
 */
public class TreeVO {
 private String id;//节点id
 private String pId;//父节点pId I必须大写
 private String name;//节点名称
 private String open = "false";//是否展开树节点，默认不展开

 public String getId() {
  return id;
 }

 public void setId(String id) {
  this.id = id;
 }

 public String getpId() {
  return pId;
 }

 public void setpId(String pId) {
  this.pId = pId;
 }

 public String getName() {
  return name;
 }

 public void setName(String name) {
  this.name = name;
 }

 public String getOpen() {
  return open;
 }

 public void setOpen(String open) {
  this.open = open;
 }

}

2. Interrogez la base de données et les champs de la structure SQL doivent également être au format id, pId, name, open (facultatif) (remarque : le I au milieu de pId doit être en majuscule), puis encapsuler le résultats dans la classe TreeVO.

/**
  * 加载树形结构数据
  * @param request
  * @param response
  * @throws IOException 
  */
 public void loadUserTree(HttpServletRequest request, HttpServletResponse response) throws IOException{
  WeiXinUserService weixinUserService = new WeiXinUserServiceImpl();
  List<TreeVO> user_tree_list = weixinUserService.getUserTreeList();
  String treeNodesJson = JSONArray.fromObject(user_tree_list).toString();//将list列表转换成json格式 返回
  
  PrintWriter out = response.getWriter();
  //利用Json插件将Array转换成Json格式 
  out.print(treeNodesJson);
  
  //释放资源
  out.close();
 }

Toute l'opération est terminée ici. Hé, l'écriture n'est pas bonne, et le langage organisationnel n'est naturellement pas très bon. S'il vous plaît, pardonnez-moi ! Apprenez ensemble et grandissez ensemble !