Как открыть все узлы в jquery Jstree?

Я использую следующий код:

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

Со следующим 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>

Моя проблема в том, что все узлы остаются закрытыми, я не могу заставить их открывать с помощью jstree ('open_all');

Ответы

Ответ 1

Документация jsTree является "подовой оптимальной". В документах четко не указано, что инициализация работает асинхронно. Там core.loaded():

Фиктивная функция, целью которой является только запуск загруженного события. Это событие запускается один раз после загрузки корневых узлов дерева, но до того, как будут открыты все узлы, установленные в initial_open.

Это означает, что событие loaded.jstree запускается после установки дерева. Вы можете подключиться к этому событию, чтобы открыть все ваши узлы:

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

Ответ 2

Я использую версию 3 jstree и Chrome. Загруженное событие не сработало для меня, но готовое событие произошло даже после создания экземпляра jstree:

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

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

Ответ 3

Если вы хотите открыть все node при загрузке дерева:

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

все ответы выше не работают в моей рабочей области. Я снова искал и нашел эту ссылку (Почему не работает jsTree open_all() для меня?) и отправьте мой ответ:

версия jstree: 3.0.0-bata10

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

Ответ 5

используйте простой код

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

Ответ 6

При использовании html-данных вы можете установить класс jstree-open на любом <li> чтобы сделать его изначально расширенным, чтобы его дети были видны ". - https://www.jstree.com/docs/html/

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

Ответ 7

Я попробовал все ответы здесь, и они не работали с jsTree (v3.3.4). Что сработало событие load_node.jstree:

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

Ответ 8

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