Maison > interface Web > js tutoriel > le corps du texte

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

php中世界最好的语言
Libérer: 2018-04-19 14:10:02
original
1548 Les gens l'ont consulté

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 });
   });
}
Copier après la connexion

À 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 });
Copier après la connexion

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 });
    }
Copier après la connexion

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");
Copier après la connexion

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal