web-dev-qa-db-fra.com

Comment ouvrir tous les nœuds dans jquery Jstree?

j'utilise le code suivant:

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

Avec le 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 nœuds restent fermés, je ne peux pas les faire s'ouvrir avec jstree ('open_all');

javascriptjqueryjstree
40
RTB

Le documentation jsTree est "sous optimal". Les documents n'indiquent pas clairement que l'initialisation fonctionne de manière asynchrone. Il y a core.loaded () :

Une fonction factice, dont le but est uniquement de déclencher l'événement chargé. Cet événement est déclenché une fois après le chargement des nœuds racine de l'arborescence, mais avant l'ouverture des nœuds définis dans initial_open.

Cela suggère un événement loaded.jstree est déclenché après la configuration de l'arborescence. Vous pouvez vous connecter à cet événement pour ouvrir tous vos nœuds:

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

J'utilise la version 3 de jstree et Chrome. L'événement chargé n'a pas fonctionné pour moi, mais l'événement ready a fonctionné, 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

26
atmelino

Si vous souhaitez ouvrir tous les nœuds lors du chargement de l'arborescence:

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

toutes les réponses ci-dessus ne fonctionnent pas dans mon espace de travail. J'ai cherché à nouveau et je trouve ce lien ( Pourquoi jsTree open_all () ne fonctionne-t-il pas pour moi? ) est utile, et poste 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();
})
9
albert yu

utiliser un code simple

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

Lorsque vous utilisez des données html 'vous pouvez définir la classe jstree-open sur n'importe quel élément <li> pour le rendre initialement étendu, afin que ses enfants soient visibles.' - https://www.jstree.com/docs/html/

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

Vous pouvez également appliquer une 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 });

0
RickL

J'ai essayé toutes les réponses ici et elles ne fonctionnaient pas avec jsTree (v3.3.4). Ce qui a fonctionné est le load_node.jstree un événement:

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