javascript - example - plugins jstree

¿Cómo abro todos los nodos en jquery Jstree?

Question

Estoy usando el siguiente código:

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

Con el siguiente 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>

Mi problema es que todos los nodos permanecen cerrados, no puedo hacer que se abran con jstree (''open_all'');

Answer 1

Al usar datos html, puede establecer la clase jstree-open en cualquier elemento <li> para que se extienda inicialmente, de modo que sus hijos estén visibles. - https://www.jstree.com/docs/html/

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

Answer 2

Estoy usando la versión 3 de jstree y Chrome. El evento cargado no funcionó para mí, pero el evento listo lo hizo, incluso después de que se creó la instancia jstree:

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

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

Answer 3

Intenté todas las respuestas aquí y no funcionaron con jsTree (v3.3.4). Lo que funcionó es el evento load_node.jstree :

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

Answer 4

La documentación de jsTree es "subóptima". Los documentos no indican claramente que la inicialización funciona de forma asíncrona. Hay core.loaded() :

Una función ficticia, cuyo propósito es solo activar el evento cargado. Este evento se desencadena una vez que se cargan los nodos raíz del árbol, pero antes de que se abran los nodos establecidos en inicialmente_abierta.

Esto sugiere un evento loaded.jstree se dispara después de que el árbol está configurado. Puedes conectarte a ese evento para abrir todos tus nodos:

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

Answer 5

Si desea abrir todos los nodos cuando el árbol está cargado:

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

Answer 6

También puede aplicar la animación a la apertura y cierre de la siguiente manera:

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

(o similarmente se aplica a .on(''ready.jstree'', function() { // code here } );

Answer 7

todas las respuestas anteriores no funcionan en mi espacio de trabajo. Volví a buscar y encontré este enlace ( ¿Por qué jsTree open_all () no me funciona? ) Es útil y publico mi respuesta:

Versión jstree: 3.0.0-bata10

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

Answer 8

usa código simple

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

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