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

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 });
   });
}

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 });

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 });
    }

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");

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.

Articles connexes :

Comment réaliser la séparation front-end et back-end dans le projet vue dans node

Comment implémenter deux files d'attente pour en représenter une dans JS Stack

Comment implémenter un écran squelette d'une seule page dans Vue

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!