如何在jquery Jstree中打开所有节点?

i'm using the following code:

我使用以下代码:

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

With the following html:

以下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>

My problem is that all nodes stay closed, i can't get them to open with jstree('open_all');

我的问题是所有节点都保持关闭状态，我无法让它们打开jstree('open_all');

8 个解决方案

#1

The jsTree documentation is "sub optimal". The docs don't clearly state that the initialization works asynchronously. There's core.loaded():

jsTree文档是“次优”的。文档不清楚地声明初始化工作是异步的。有core.loaded():

A dummy function, whose purpose is only to trigger the loaded event. This event is triggered once after the tree's root nodes are loaded, but before any nodes set in initially_open are opened.

一个虚函数，其目的只是触发加载的事件。这个事件在树的根节点被加载后触发一次，但是在initially_open的任何节点被打开之前。

This suggests an event loaded.jstree is fired after the tree is setup. You can hook into that event to open all your nodes:

这意味着加载了一个事件。在树设置之后，jstree被触发。你可以连接到那个事件来打开所有的节点:

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

#2

I am using version 3 of jstree and Chrome. The loaded event did not work for me, but the ready event did, even after the jstree instance was created:

我使用的是jstree和Chrome的版本3。加载的事件对我不起作用，但即使在jstree实例被创建之后，已准备好的事件也会起作用:

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

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

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

#3

If you want open all node when tree loaded:

如果您想在树加载时打开所有节点:

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

all the answers above not work in my workspace. I searched again and find this link(Why doesn't jsTree open_all() work for me?) is helpful, and post my answer:

以上所有的答案都不在我的工作空间里。我再次搜索并找到了这个链接(为什么jsTree open_all()为我工作?)是有帮助的，并发布我的答案:

jstree version: 3.0.0-bata10

jstree版本:3.0.0-bata10

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

#5

use simple code

使用简单的代码

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

#6

When using html data 'you can set the jstree-open class on any <li> element to make it initially extended, so that its children are visible.' - https://www.jstree.com/docs/html/

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

元素上设置jstree-open类，使其最初扩展，从而使它的子元素可见。”——https://www.jstree.com/docs/html/

元素上设置jstree-open类,使其最初扩展,从而使它的子元素可见。”——https://www.jstree.com/docs/html/

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

#7

I tried all the answers here and they didn't work with jsTree (v3.3.4). What worked is the load_node.jstree event:

我尝试了所有的答案，但是他们没有使用jsTree (v3.3.4)。工作的是load_node。jstree事件:

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

#8

-1

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

#1