Comment résoudre le problème selon lequel l'ajout de nœuds enfants est toujours répété lorsque zTree est chargé de manière asynchrone

Cette fois, je vais vous montrer comment résoudre le problème selon lequel l'ajout de nœuds enfants est toujours répété lorsque zTree est chargé de manière asynchrone. Quels sont les problèmes ? précautions ? Voici des cas pratiques.

zTree est un "plug-in d'arbre" multifonctionnel implémenté par jQuery. A travers cet article, je partagerai avec vous le problème de duplication du chargement asynchrone de jQuery zTree pour ajouter des nœuds enfants. 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, et 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 (repose sur CSS)

• Prend en charge la fonction de case à cocher ou de sélection radio extrêmement flexible

• Fournit une variété de

  événements rappels de réponse

• 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

• Sur une seule page, plusieurs instances d'arbre peuvent être générées en même temps

• Configuration simple des paramètres pour obtenir des fonctions flexibles et modifiables

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 (le première fois); plus tard, j'ai vérifié si le nœud parent L'expansion a été jugée, mais il s'est avéré 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

Remplacer

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

Ça n'a pas l'air 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");

Je pense que vous avez lu le cas dans cet article. Après avoir maîtrisé la méthode, veuillez prêter attention aux autres articles connexes sur le site Web php chinois pour un contenu plus passionnant !

Lecture recommandée :

Comment découvrir des éléments cachés dans l'espace vide

Comment réaliser une liaison sans actualisation de listes déroulantes avec Ajax

Explication détaillée de l'absence de nouvelle construction

implémentation jQuery de la navigation par menu déroulant

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!