Comment ouvrir TOUS les noeuds de jquery Jstree?

Question

Comment ouvrir TOUS les noeuds de jquery Jstree?

j'utilise le code suivant:

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

avec le code html suivant:

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

mon problème est que tous les noeuds restent fermés, Je ne peux pas les faire Ouvrir avec jstree ('open_all');

34

javascript jquery jstree

demandé sur arogachev 2012-06-13 19:26:35

9 réponses

score 52 · Answer 1

le jstree documentation est" sous-optimal". Les docs n'indiquent pas clairement que l'initialisation fonctionne de manière asynchrone. Il y a core.chargé() :

une fonction factice, dont le but est uniquement de déclencher l'événement de charge. Cet événement est déclenché une fois que les noeuds racine de l'arbre sont chargés, mais avant que les noeuds définis dans initialy_open ne soient ouverts.

ce qui suggère un événement loaded.jstree est déclenché après la configuration de l'arbre. Vous pouvez vous connecter à cet événement pour ouvrir TOUS vos noeuds:

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

score 25 · Answer 2

j'utilise la version 3 de Jstree et Chrome. L'événement chargé n'a pas fonctionné pour moi, mais l'événement prêt l'a fait, même après la création de l'instance jstree:

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

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

score 16 · Answer 3

si vous voulez ouvrir TOUS les noeuds lorsque l'arbre est chargé:

$("#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");
    })      
});

score 8 · Answer 4

toutes les réponses ci-dessus ne fonctionnent pas dans mon espace de travail. J'ai cherché à nouveau et j'ai trouvé ce lien( pourquoi jsTree open_all() ne fonctionne-t-il pas pour moi? ) est utile, et poster ma réponse:

version jstree: 3.0.0-bata10

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

score 1 · Answer 5

utiliser le code simple

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

score 1 · Answer 6

lorsque vous utilisez des données html ,vous pouvez configurer la classe jstree-open sur n'importe quel élément

pour qu'elle soit initialement étendue, de sorte que ses enfants soient visibles."- https://www.jstree.com/docs/html /

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

score 0 · Answer 7

j'ai essayé toutes les réponses ici et ils n'ont pas fonctionné avec jsTree (v3.3.4). Ce qui a fonctionné est l'événement load_node.jstree :

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

score 0 · Answer 8

vous pouvez aussi appliquer l'animation à l'ouverture et à la fermeture comme suit:

$(document)
    .on("click", "#open-all-folders", function () {
        // param1 set to null to open/close all nodes
        // param2 is the duration in milliseconds
        $("#tree-ref").jstree().open_all(null, 200);
    })
    .on("click", "#close-all-folders", function () {
        $("#tree-ref").jstree().close_all(null, 200);
    });

(ou s'appliquent de la même manière à .on('ready.jstree', function() { // code here } );

score -1 · Answer 9

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

Las etiquetas más populares

Comment ouvrir TOUS les noeuds de jquery Jstree?

9 réponses