Chargement asynchrone à l'aide de zTree (tutoriel détaillé)-js tutoriel-php.cn

Chargement asynchrone à l'aide de zTree (tutoriel détaillé)

亚连

Libérer： 2018-06-23 15:39:21

original

3527 Les gens l'ont consulté

zTree est un "plug-in d'arbre" multifonctionnel implémenté avec jQuery. A travers cet article, je partagerai avec vous le problème de duplication lié à l'ajout de nœuds enfants dans le chargement asynchrone de jQuery zTree. Les amis qui en ont besoin peuvent s'y référer

Introduction à zTree

zTree est un "plug-in d'arbre" multifonctionnel implémenté avec jQuery. D'excellentes performances, une configuration flexible et une combinaison de plusieurs fonctions sont les plus grands avantages de zTree.

zTree est un logiciel open source et gratuit (licence MIT). Si vous êtes intéressé par zTree ou si vous souhaitez financer le développement continu de zTree, vous pouvez faire un don.

zTree v3.0 divise le code principal en fonction des fonctions. Le code inutile n'a pas besoin d'être chargé
Adopte la technologie de chargement paresseux. Des dizaines de milliers de nœuds peuvent être facilement chargés, même sous IE6, il peut essentiellement être tué instantanément
Compatible avec IE, FireFox, Chrome, Opera, Safari et d'autres navigateurs
Prend en charge les données JSON
Prend en charge le chargement statique et asynchrone Ajax des données de nœud
Prend en charge tout changement de skin/ icône personnalisée (s'appuyer sur CSS)
Prend en charge les cases à cocher ou la fonction de sélection radio extrêmement flexibles
Fournit une variété de rappels de réponse aux événements
Fonctions d'édition flexibles (ajouter/supprimer/modifier/vérifier), vous pouvez faire glisser et déposer des nœuds à volonté, et vous pouvez faire glisser et déposer plusieurs nœuds
Plusieurs arbres peuvent être générés en même temps sur une seule page Exemple
Configuration simple des paramètres pour obtenir des fonctions flexibles

Question originale

//添加结点, 产品和版本
function addNode(event) {
  rMenu.css({ "visibility": "hidden" });
  var treeNode = zTree.getSelectedNodes()[0];
  var pid;
  var nodeName;
  var treelevel;
  if (!treeNode && event.target.tagName.toLowerCase() != "button" && $(event.target).parents("a").length == 0) {
   //添加产品结点
pid = 0;
   treeNode = null;
   treelevel = 1;
  } else if (treeNode) {
   //添加版本结点
pid = treeNode.id;
  treelevel = 2;
  }
  $.post(
   "AddNode.action",
   { type: treelevel, id: pid },
   function(nodeIdAndName) {
    var params = /([^\|]+)\|([^\|]+)/.exec(nodeIdAndName);
    if (!((!treeNode && event.target.tagName.toLowerCase() != "button" && $(event.target).parents("a").length == 0) || treeNode.open)) {
     zTree.expandNode(treeNode, true);
    }
    treeNode = zTree.addNodes(treeNode, { id: params[1], pid: pid, isParent: "true", name: params[2], editable: "true", treelevel: treelevel });
   });
}

Copier après la connexion

Lorsque j'ai initialement ajouté directement des nœuds enfants, si le nœud parent n'était pas développé, deux nœuds enfants identiques seraient ajoutés (la première fois, j'ai jugé si) ; le nœud parent a été développé, mais il s'avère que si le nœud parent est développé, deux nœuds enfants identiques seront ajoutés (pour la première fois).

Méthode 1

Remplacez la

if (!((!treeNode && event.target.tagName.toLowerCase() != "button" && $(event.target).parents("a").length == 0) || treeNode.open)) {
     zTree.expandNode(treeNode, true);
    }
    treeNode = zTree.addNodes(treeNode, { id: params[1], pid: pid, isParent: "true", name: params[2], editable: "true", treelevel: treelevel });

Copier après la connexion

par

if(!treeNode && event.target.tagName.toLowerCase() != "button" && $(event.target).parents("a").length == 0)
    {
     treeNode = zTree.addNodes(treeNode, { id: params[1], pid: pid, isParent: "true", name: params[2], editable: "true", treelevel: treelevel });
    }
    else if(treeNode.open)
    {
     if(treeNode.isParent)
     {
      zTree.reAsyncChildNodes(treeNode, "refresh");
     }
     else
     {
      treeNode.isParent=true;
      zTree.reAsyncChildNodes(treeNode, "refresh");
     }
    }
    else
    {
     zTree.expandNode(treeNode, true);
     treeNode = zTree.addNodes(treeNode, { id: params[1], pid: pid, isParent: "true", name: params[2], editable: "true", treelevel: treelevel });
    }

Copier après la connexion

question résolue, mais a-t-il été optimisé ? J'ai l'impression qu'il y a trop de catégories de codes après le changement

La meilleure façon

Cela ne semble pas si gênant, n'est-ce pas ? J'ai répondu à une question similaire il y a deux jours.

1. Après avoir cliqué pour ajouter un nœud enfant, envoyez directement ajax en arrière-plan pour enregistrer les données et capturer l'événement de réussite

2 Lorsque ajax réussit, vous pouvez utiliser treeNode.zAsync. attribut pour savoir si le nœud parent est Un chargement asynchrone a été effectué. S'il est faux, alors directement reAsyncChildNodes est actualisé. Si c'est vrai, alors utilisez addN...

if ((!treeNode && event.target.tagName.toLowerCase() != "button" && $(event.target).parents("a").length == 0) || treeNode.zAsync) 
     treeNode = zTree.addNodes(treeNode, { id: params[1], pid: pid, isParent: "true", name: params[2], editable: "true", treelevel: treelevel });
    else
     zTree.reAsyncChildNodes(treeNode, "refresh");

Copier après la connexion

Ce qui précède est ce que j'ai. compilé pour tout le monde. J’espère qu’il sera utile à tout le monde à l’avenir.