Comment résoudre le BUG qui ne peut pas entrer dans la zone visible lorsque ztree obtient le node_jquery sélectionné

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.

Édition des fonctionnalités de zTree

● zTree v3.0 divise le code principal en fonction des fonctions, et le code inutile n'a pas besoin d'être chargé
● Grâce à la technologie de chargement paresseux, des dizaines de milliers de nœuds peuvent être facilement chargés et peuvent pratiquement être tués instantanément, même sous IE6
● Compatible avec IE, FireFox, Chrome, Opera, Safari et autres navigateurs
● Prise en charge des 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 (en s'appuyant sur CSS)
● Prend en charge la fonction de case à cocher ou de sélection radio extrêmement flexible
● Fournit plusieurs rappels de réponse à des é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 instances d'arbre peuvent être générées simultanément sur une seule page
● Configuration simple des paramètres pour obtenir des fonctions flexibles

Avantages de l'édition zTree

L'auteur de zTree utilise son temps libre pour améliorer continuellement les fonctions de zTree, et peut également communiquer avec les utilisateurs en temps opportun et répondre à diverses questions en temps opportun, afin que les nouveaux utilisateurs puissent le maîtriser rapidement. Actuellement, de plus en plus d'utilisateurs utilisent zTree pour remplacer le plug-in d'arborescence d'origine dans le système, y compris la dernière version récemment publiée du framework QUI.

Version du plug-in associé :

jquery.ztree.exedit-3.4.js

jquery.ztree.all-3.4.js

jquery-1.8.0.js

 function onAsyncSuccess(event, treeId, treeNode, msg) {
     curAsyncCount--;
     if (curStatus == "expand") {
       expandNodes(treeNode.children);
     } else if (curStatus == "async") {
       asyncNodes(treeNode.children);
     } 
     if (curAsyncCount <= ) {
       curStatus = "";
       // 节点定位
       if(devicesSelect.selectNodeId){
         // 节点变成被选中状态
         var zTree = $.fn.zTree.getZTreeObj(zTreeId);
         zTree.cancelSelectedNode();
         $("#" + devicesSelect.selectNodeId + "_a").addClass("curSelectedNode");
         $("#treeDiv").animate({scrollTop:$("#"+devicesSelect.selectNodeId).offset().top-},);//是ms,也可以用slow代替
         devicesSelect.selectNodeId = "";
       }
     }
   } 
   function expandNodes(nodes) {
     if (!nodes) return;
     curStatus = "expand";
     var zTree = $.fn.zTree.getZTreeObj(zTreeId);
     for (var i=, l=nodes.length; i<l; i++) {
       if(ids.indexOf(nodes[i].id) != -){
         if (nodes[i].isParent&&(ids.substring(,ids.indexOf(","))!=nodes[i].id)) {
           if(nodes[i].typeName.indexOf("虚拟")=="-"){
             zTree.expandNode(nodes[i], true, false, false);
           } else if(nodes[i].type.indexOf(type)>"-"){
             zTree.expandNode(nodes[i], true, false, false);
           }
         } else {
           goAsync = true;
         }
       }
     }
     if(goAsync==true){
       var id_ = ids.substring(,ids.indexOf(","));
       var node = zTree.getNodeByParam("id",id_);
       goAsync = false;
       me.curStatus = "";
       me.type = "";
       me.selectNodeId = node.tId;
     }
   } 

Idées de positionnement :

1. Supposons que vous souhaitiez localiser le nœud A. L'identifiant unique du nœud A est objid

2. Obtenez tous les objids supérieurs de la base de données basés sur objid, assemblez-les et enregistrez-les dans la variable ids.

3. Appelez expandNodes dans la méthode onAsyncSuccess. Dans cette méthode, transmettez [if (nodes[i].isParent&&(ids.substring(0,ids.indexOf(","))!=nodes[i].id. ) )] filtrer et développer les nœuds avec id dans ids.

4. Dans des circonstances normales, à la fin de l'expansion, obtenez l'objet nœud A via [var node = zTree.getNodeByParam("id",id_);] basé sur objid, puis sélectionnez-le via [zTree.selectNode (nœud);] nœud.

Dans ce cas, le nœud cible peut être localisé et sélectionné. Cependant, lorsqu'il y a beaucoup de données avec le même nœud parent que le nœud, le nœud A peut ne pas apparaître dans la zone visible. En recherchant le code source, j'ai découvert que Ztree utilise la méthode [$("#" node.tId).focus().blur();] pour réaliser le positionnement. Mais malheureusement, il y a un BUG.

Alors, utilisez la barre de défilement pour contrôler vous-même le positionnement. La mise en œuvre est la suivante :

1. Supprimez [zTree.selectNode(node);] pour éviter les conflits de positionnement

2. Dans la méthode onAsyncSuccess, déterminez quand le nœud est développé, obtenez le décalage du nœud A et attribuez la valeur à l'attribut scrollTop du DIV où se trouve l'arborescence.

$("#treeDiv1").animate({scrollTop:$("#" devicesSelect.selectNodeId).offset().top-300},1000);//1000 est ms, vous pouvez également utiliser slow à la place

Remarque : devicesSelect.selectNodeId est le nœud tid du nœud A, obtenu via [me.selectNodeId = node.tId] ; l'attribut id du div où se trouve l'arborescence treeDiv1

3. Annulez le nœud précédemment sélectionné : zTree.cancelSelectedNode();

4. Ajoutez la classe d'état sélectionnée au nœud A : $("#" devicesSelect.selectNodeId "_a").addClass("curSelectedNode");

L'auteur a dit à la légère : pour le deuxième point, je voulais à l'origine utiliser [$("#treeDiv1").scrollTop($("#" devicesSelect.selectNodeId).offset().top-200);] , bien que cela soit efficace, lorsqu'il y a trop de nœuds sur le même calque, il ne peut toujours pas entrer dans la zone visible. Je soupçonne profondément que c'est parce que l'arborescence n'a pas été développée à ce moment-là, j'ai donc utilisé l'animation, qui est un voyou. se déplacer.

Les derniers mots de l'auteur : S'il y a des erreurs dans cet article, veuillez le signaler, je vous en serai très reconnaissant. . . .

Le contenu ci-dessus est la description complète de la façon de résoudre le bug qui se produit lorsque ztree ne peut pas entrer dans la zone visible lors de l'acquisition des nœuds sélectionnés. J'espère que vous l'aimerez.