web-dev-qa-db-ja.com

親がクリックされたときにjsTreeノードを展開します

JsTreeを使用して非常に単純なツリーを実装しようとしています。ドキュメントが密集していて圧倒的であることがわかりました。

今、私はここに示されている矢印をクリックしてノードを展開/折りたたみます：

enter image description here

ノード名もクリックして展開/折りたたみできるようにしたい：

enter image description here

私が使用しているコードは単純です。 jsTreeのJavaScriptを変更していません。

<ul id="tree">
   <li>
      SubFolder1
      <ul id="tree">
         <li data-jstree='{"icon":"/Images/blue-folder.png"}'>Pub 1</li>
      </ul>
   </li>
</ul>
javascriptjquerycssjstree
13
John 'Mark' Smith

HTMLファイルにイベントリスナーを追加し、toggle_node関数を呼び出すだけです。以下のこのコードは、シングルクリックをリッスンします。

$(document).ready(function(){
  $('#jstree_div').on("select_node.jstree", function (e, data) { $('#jstree_div').toggle_node(data.node); });
}

JsTreeはまだダブルクリックイベントをサポートしていないため、ダブルクリックをリッスンする場合は、別のイベントリスナーが必要です。

$('#jstree_div').on("dblclick",function (e) { 
  var li = $(e.target).closest("li");
  var node = $('#jstree_div').get_node(li[0].id);

  $('#jstree_div').toggle_node(node)
});

お役に立てば幸いです。

8
oerl
$('#tree').on('select_node.jstree', function (e, data) {
    data.instance.toggle_node(data.node);
});

それは私のために働いた。 oerlsソリューションはしませんでした。

16
itmuckel
$('#jstree').on("select_node.jstree", function (e, data) { 
     $('#jstree').jstree("toggle_node", data.node);
 });

また、これは機能します

3
Abdulaziz N