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é
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!