web-dev-qa-db-ja.com

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'）;でノードを開くことができません。

javascriptjqueryjstree
40
RTB

jsTree documentation は「準最適」です。ドキュメントには、初期化が非同期に機能することを明確に記載されていません。 core.loaded（） があります：

ロードされたイベントをトリガーすることのみを目的とするダミー関数。このイベントは、ツリーのルートノードがロードされた後、initially_openで設定されたノードが開かれる前に1回トリガーされます。

これは、イベントloaded.jstreeは、ツリーがセットアップされた後に発生します。そのイベントにフックして、すべてのノードを開くことができます。

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

JstreeとChromeのバージョン3を使用しています。ロードされたイベントは私にとっては機能しませんでしたが、jstreeインスタンスが作成された後でもreadyイベントは機能しました。

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

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

26
atmelino

ツリーのロード時にすべてのノードを開く場合：

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

上記のすべての答えは私のワークスペースでは機能しません。私は再び検索してこのリンクを見つけました（ なぜjsTree open_all（）がうまくいかないのですか？ ）が役に立ち、答えを投稿してください：

jstreeバージョン：3.0.0-bata10

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

シンプルなコードを使用する

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

Htmlデータを使用する場合は、「<li>要素にjstree-openクラスを設定して、最初に拡張し、その子が見えるようにすることができます。」 - https://www.jstree.com/docs/html/

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

次のようにアニメーションを開閉に適用することもできます。

_$(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 }に適用）;

0
RickL

ここですべての回答を試しましたが、jsTree（v3.3.4）では機能しませんでした。働いたのはload_node.jstreeイベント：

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