如何在 jquery Jstree 中打開所有節點？

Question

我正在使用以下代碼：

$("#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');打開它們jstree('open_all'); .

Answer 1

jsTree 文檔是“次優的”。 文檔沒有明確說明初始化是異步工作的。 有core.loaded() ：

一個虛擬函數，其目的只是觸發加載的事件。 在加載樹的根節點之后，但在打開 initial_open 中設置的任何節點之前，會觸發一次此事件。

這表明在設置樹之后會觸發一個事件loaded.jstree 。 您可以掛接到該事件以打開所有節點：

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

Answer 2

我正在使用 jstree 和 Chrome 的第 3 版。 加載的事件對我不起作用，但即使在創建 jstree 實例之后，就緒事件也起作用：

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

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

Answer 3

如果要在加載樹時打開所有節點：

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

Answer 5

使用簡單的代碼

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

Answer 6

使用 html 數據時，“您可以在任何 <li> 元素上設置 jstree-open 類以使其最初擴展，以便其子項可見。” - https://www.jstree.com/docs/html/

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

Answer 7

我在這里嘗試了所有答案，但它們不適用於 jsTree (v3.3.4)。 有效的是load_node.jstree事件：

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

Answer 8

您還可以將動畫應用到打開和關閉，如下所示：

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

（或類似地適用於.on('ready.jstree', function() { // code here } );

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