2012-06-13 17 views
32

Ich verwende den folgenden Code:Wie öffne ich alle Knoten in Jquery Jstree?

$("#treeview").jstree(); 
$("#treeview").jstree('open_all'); 

Mit dem folgenden html:

<div id="treeview"> 
    <ul> 
    <li> 
     <a href="#">rubentebogt</a> 
     <ul> 
     <li> 
      <a href="#" onclick="goTo('index.php?module=alarm&amp;pagina=dashboard&amp;id=6',false);">Beneden</a> 
     </li> 
     <li> 
      <a href="#" onclick="goTo('index.php?module=alarm&amp;pagina=dashboard&amp;id=7',false);">Boven</a> 
     </li> 
     </ul> 
    </li> 
    </ul> 
</div> 

Mein Problem ist, dass alle Knoten bleiben geschlossen, ich sie mit jstree nicht bekommen zu öffnen (‘ öffne alle');

+0

Und das Problem ist? – Andreas

+0

können Sie Ihren generierten HTML-Code anstelle von Smarty veröffentlichen? –

+1

Ich habe meine Frage bearbeitet, danke Jungs. – RTB

Antwort

47

Die jsTree documentation ist "suboptimal". Die Dokumentation besagt nicht eindeutig, dass die Initialisierung asynchron ausgeführt wird. Es gibt core.loaded():

Eine Dummy-Funktion, die nur zum Auslösen des geladenen Ereignisses dient. Dieses Ereignis wird einmal ausgelöst, nachdem die Stammknoten des Baums geladen wurden, jedoch bevor alle in initial_open festgelegten Knoten geöffnet werden.

Dies deutet darauf hin, dass ein Ereignis ausgelöst wird, nachdem der Baum eingerichtet wurde. Sie können in diesem Fall Haken alle Knoten zu öffnen:

var $treeview = $("#treeview"); 
$treeview 
    .jstree(options) 
    .on('loaded.jstree', function() { 
    $treeview.jstree('open_all'); 
    }); 
+0

Funktioniert das auch für das Ereignis refresh.jstree? – RTB

+1

Ich hatte das umgekehrte Problem nach der Verwendung dieses Codes.Ich habe nach dem "An" -Aufruf einen weiteren Anruf zu jstree ('open_all') hinzugefügt, weil Chrome den Baum vor der Ereignisregistrierung beendet hat. –

+0

Funktioniert diese Antwort noch? Ich kann nicht scheinen, dass es für meinen Baum funktioniert, obwohl es ziemlich geradlinig scheint. – Smoore

15

Wenn Sie alle Knoten geöffnet werden soll, wenn Baum geladen:

$("#treeview") 
    // call `.jstree` with the options object 
    .jstree({ 
     "plugins" : ["themes", "html_data","ui","crrm","sort"] 
    }) 
    .bind("loaded.jstree", function (event, data) { 
     // you get two params - event & data - check the core docs for a detailed description 
     $(this).jstree("open_all"); 
    })  
}); 
+4

Für das ursprüngliche Plakat, es hilft, ein wenig mehr eine Erklärung zu geben, warum dies funktionieren würde - d. H. In diesem Fall zu erklären, dass '.jstree()' asynchron läuft und ein Ereignis auslöst, wenn es fertig ist. –

+1

Danke für den Code, es funktioniert gut für mich, übrigens, Sie haben eine zusätzliche}) im Code. –

-1
.bind("loaded.jstree", function (event, data) { 
     // you get two params - event & data - check the core docs for a detailed description 
     $(this).jstree("open_all"); 
    }) 
7

alle Antworten oben nicht in meinem Arbeitsbereich zu arbeiten. Ich suchte wieder und finden Sie diesen Link (Why doesn't jsTree open_all() work for me?) ist hilfreich, und poste meine Antwort:

jstree Version: 3.0.0-bata10

$(document).ready(function() { 
    $("#tree").bind("loaded.jstree", function(event, data) { 
    data.instance.open_all(); 
    }); 
    $("#tree").jstree(); 
}) 
+0

einfach binden ready.jstree als atmelino erwähnt und Problem gelöst – mikus

23

Ich bin mit Version 3 von jstree und Chrome. Das geladene Ereignis nicht für mich arbeiten, aber das Ereignis ready tat, auch nach der jstree Instanz erstellt wurde:

$('#treeview').on('ready.jstree', function() { 
    $("#treeview").jstree("open_all");   
}); 

http://www.jstree.com/api/#/?q=.jstree%20Event&f=ready.jstree

+0

Dies funktionierte für mich, während die angenommene Antwort nicht. – xil3

1

Verwendung einfacher Code

$(".jstree").jstree().on('loaded.jstree', function() { 
    $(".jstree").jstree('open_all'); 
}) 
0

Wenn HTML-Daten unter Verwendung von ' Sie können die Klasse jstree-open für jedes Element <li> so einstellen, dass es anfänglich erweitert wird, so dass die untergeordneten Elemente sichtbar sind. - https://www.jstree.com/docs/html/

<li class="jstree-open" id="node_1">My Open Node</li> 
0

Ich habe versucht, alle Antworten hier und sie funktionierten nicht mit jsTree (v3.3.4). Was funktioniert ist das load_node.jstree Ereignis:

.on('load_node.jstree', function() { 
     jstree.jstree("open_all"); 
    }) 
Verwandte Themen