So beheben Sie den Fehler, der nicht in den sichtbaren Bereich gelangen kann, wenn ztree die ausgewählte node_jquery erhält

zTree ist ein multifunktionales „Baum-Plug-in“, das mit jQuery implementiert wird. Hervorragende Leistung, flexible Konfiguration und Kombination mehrerer Funktionen sind die größten Vorteile von zTree.

Bearbeiten von zTree-Funktionen

● zTree v3.0 unterteilt den Kerncode nach Funktionen, und unnötiger Code muss nicht geladen werden
● Durch die Verwendung der Lazy-Loading-Technologie können Zehntausende von Knoten problemlos geladen werden, und im Grunde kann sogar unter IE6
ein sofortiges Töten erreicht werden ● Kompatibel mit IE, Firefox, Chrome, Opera, Safari und anderen Browsern
● Unterstützt JSON-Daten
● Unterstützt statisches und asynchrones Ajax-Laden von Knotendaten
● Unterstützt jede Skin-Änderung/benutzerdefiniertes Symbol (basierend auf CSS)
● Unterstützt eine äußerst flexible Kontrollkästchen- oder Optionsauswahlfunktion
● Bietet mehrere Rückrufe für Ereignisantworten
● Flexible Bearbeitungsfunktionen (Hinzufügen/Löschen/Ändern/Prüfen), Sie können Knoten nach Belieben ziehen und ablegen, und Sie können mehrere Knoten per Drag & Drop ziehen
● Mehrere Tree-Instanzen können gleichzeitig auf einer Seite generiert werden
● Einfache Parameterkonfiguration zur Erzielung flexibler Funktionen

Vorteile von zTree Editing

Der Autor von zTree nutzt seine Freizeit, um die zTree-Funktionen kontinuierlich zu verbessern. Außerdem kann er zeitnah mit Benutzern kommunizieren und auf verschiedene Fragen zeitnah antworten, sodass neue Benutzer schnell damit umgehen können. Derzeit verwenden immer mehr Benutzer zTree, um das ursprüngliche Baum-Plug-in im System zu ersetzen, einschließlich der kürzlich veröffentlichten neuesten Version des QUI-Frameworks.

Verwandte Plug-in-Version:

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

Positionierungsideen:

1. Angenommen, Sie möchten Knoten A lokalisieren. Die eindeutige Kennung von Knoten A ist objid

2. Holen Sie sich alle übergeordneten Objids basierend auf Objid aus der Datenbank, fügen Sie sie zusammen und speichern Sie sie in der ID-Variablen.

3. Rufen Sie expandNodes in der onAsyncSuccess-Methode auf. Übergeben Sie in dieser Methode [if (nodes[i].isParent&&(ids.substring(0,ids.indexOf(","))!=nodes[i].id ) )] Filtern und erweitern Sie die Knoten mit der ID in IDs.

4. Unter normalen Umständen erhalten Sie am Ende der Erweiterung das Knoten-A-Objekt über [var node = zTree.getNodeByParam("id",id_);] basierend auf objid und wählen es dann über [zTree.selectNode (Knoten);] Knoten.

In diesem Fall kann der Zielknoten gefunden und ausgewählt werden. Wenn jedoch viele Daten mit demselben übergeordneten Knoten wie der Knoten vorhanden sind, wird Knoten A möglicherweise nicht im sichtbaren Bereich angezeigt. Beim Durchsuchen des Quellcodes habe ich festgestellt, dass Ztree die Methode [$("#" node.tId).focus().blur();] verwendet, um eine Positionierung zu erreichen. Aber leider gibt es einen Fehler.

Verwenden Sie also die Bildlaufleiste, um die Positionierung selbst zu steuern. Die Implementierung ist wie folgt:

1. Löschen Sie [zTree.selectNode(node);], um Positionierungskonflikte zu verhindern

2. Bestimmen Sie in der onAsyncSuccess-Methode, wann der Knoten erweitert wird, ermitteln Sie den Offset von Knoten A und weisen Sie den Wert dem scrollTop-Attribut des DIV zu, in dem sich der Baum befindet.

$("#treeDiv1").animate({scrollTop:$("#" devicesSelect.selectNodeId).offset().top-300},1000);//1000 ist ms, Sie können stattdessen auch slow verwenden

Hinweis: devicesSelect.selectNodeId ist die Knoten-TID von Knoten A, erhalten durch [me.selectNodeId = node.tId], das id-Attribut des Div, in dem sich der Baum „treeDiv1“ befindet

3. Brechen Sie den zuvor ausgewählten Knoten ab: zTree.cancelSelectedNode();

4. Fügen Sie die ausgewählte Statusklasse zu Knoten A hinzu: $("#" devicesSelect.selectNodeId "_a").addClass("curSelectedNode");

Der Autor sagte leichthin: Für den zweiten Punkt wollte ich ursprünglich [$("#treeDiv1").scrollTop($("#" devicesSelect.selectNodeId).offset().top-200);] verwenden. Obwohl es effektiv ist, kann es bei zu vielen Knoten auf derselben Ebene immer noch nicht in den sichtbaren Bereich gelangen. Ich vermute zutiefst, dass dies daran liegt, dass der Baum zu diesem Zeitpunkt noch nicht erweitert wurde. Daher habe ich eine Animation verwendet, die ein Fehler ist bewegen.

Die letzten Worte des Autors: Wenn dieser Artikel Fehler enthält, weisen Sie ihn bitte darauf hin. . . .

Der obige Inhalt ist die vollständige Beschreibung zur Behebung des Fehlers, der auftritt, wenn ztree beim Erwerb ausgewählter Knoten nicht in den sichtbaren Bereich gelangen kann.