如何在 jquery Jstree 中打开所有节点？答案

【问题标题】：How do I open all nodes in jquery Jstree?如何在 jquery Jstree 中打开所有节点？
【发布时间】：2012-06-13 15:26:35
【问题描述】：

我正在使用以下代码：

$("#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'); 打开它们。

【问题讨论】：

你能发布你生成的 HTML 而不是 Smarty 吗？
@Mr.sinoser 发表评论 Note: when you use jQuery .on() method you should check your add jQuery core!! because this method is ready on jQuery 1.7 and upper and While the .bind() method existing in jQuery 1.0（从答案复制，答案标记为删除）
在我的例子中，它只是与$("#treeview").jstree('open_all'); 中的语句一起工作，如link 中所示

标签： javascript jquery jstree

【解决方案1】：

jsTree documentation 是“次优”。文档没有明确说明初始化是异步工作的。有core.loaded()：

一个虚拟函数，其目的只是触发加载的事件。该事件在树的根节点加载后，但在initial_open中设置的任何节点打开之前触发一次。

这表明在设置树后会触发事件loaded.jstree。您可以挂钩该事件以打开所有节点：

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

【讨论】：

我在使用此代码后遇到了相反的问题。我最终在“on”调用之后添加了另一个对 jstree('open_all') 的调用，因为 chrome 在事件注册之前完成了树
这个答案还有效吗？我似乎无法让它为我的树工作，尽管它看起来很简单。
请注意下面 atmelino 的回答，在版本 3 上，“ready.jstree”而不是“loaded.jstree”将完成任务。
这对我不起作用 - 检查下面的答案以了解“ready.jstree”操作。

【解决方案2】：

我正在使用 jstree 和 Chrome 的第 3 版。 load 事件对我不起作用，但 ready 事件对我起作用，即使在创建 jstree 实例之后也是如此：

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

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

【讨论】：

这对我有用，而接受的答案却没有。

【解决方案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");
    })      
});

【讨论】：

为了原始发布者的缘故，它有助于给出更多解释为什么这会起作用 - 即在这种情况下解释 .jstree() 异步运行并在它准备好时触发一个事件。跨度>
感谢您的代码，它对我来说很好用，顺便说一句，您的代码中有一个额外的 })。

【解决方案4】：

以上所有答案都不适用于我的工作区。我再次搜索，发现这个链接（Why doesn't jsTree open_all() work for me?）很有帮助，并发布我的答案：

jstree 版本：3.0.0-bata10

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

【讨论】：

简单地绑定 ready.jstree 作为 atmelino 提到的和问题解决

【解决方案5】：

使用简单的代码

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

【讨论】：

【解决方案6】：

使用 html 数据时，'您可以在任何

元素上设置 jstree-open 类，使其最初扩展，以便其子元素可见。 - 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】：

您也可以像这样将动画应用于打开和关闭：

$(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 }）；

【讨论】：

【解决方案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");
    })

【讨论】：