jQuery zTree ajoute à plusieurs reprises des nœuds enfants pendant le processus asynchrone

Cette fois, je vais vous présenter l'ajout répété de nœuds enfants par jQuery zTree pendant le processus asynchrone Remarques sur la gestion de l'ajout répété de nœuds enfants par jQuery zTree pendant le processus asynchrone. Oui Lesquels, les suivants sont des cas pratiques, jetons un coup d'œil.

zTree Introduction

zTree est un "plug-in d'arbre" multifonctionnel implémenté par 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 chargés facilement, et cela peut être. essentiellement réalisé même sous IE6 Flash Sale

• 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'appuyant sur CSS)

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

• Fournit une variété de événementsrappels 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 plusieurs nœuds

• dans plusieurs instances d'arbre peuvent être générées simultanément sur une seule page

• La configuration simple des paramètres réalise 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 });
   });
}

À l'origine, lors de l'ajout direct de 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 ensuite jugé si le nœud parent était développé, mais c'est devenu le cas si le nœud parent était développé). deux nœuds enfants identiques seront ajoutés (pour la première fois). Comment résoudre ce problème ?

Méthode 1

Will

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

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

Le problème peut être résolu, mais y a-t-il une optimisation ? J'ai l'impression que le code révisé comporte trop de catégories

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, transférez-le directement en 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 l'attribut treeNode.zAsync pour savoir si le nœud parent a été chargé de manière asynchrone. S'il est faux, alors directement reAsyncChildNodes est actualisé. Si c'est vrai, 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");

Croyez-le Après avoir lu le cas dans cet article, vous maîtrisez la méthode. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web PHP chinois !

Lecture recommandée :

Comment configurer le webpack avec jquery

Étapes détaillées de l'accordéon à panneau pliant avec jQuery EasyUI

JQuery liste d'actions des soldats pour y ajouter dynamiquement de nouveaux éléments

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!