JSTREEを利用したツリー表示で要素をクリック時にページ移動させたい

前提・実現したいこと

Jstreeを利用してツリー表示させた場合に、HTML内で定義した「<li>テスト1</li>」の部分をクリックした際に特定のページ(例えばhttp://www.google.com)へリンクさせたい。

該当のソースコード

<div id="tree1">
  <ul>
      <li><b>SAMPLE</b>
          <ul>
          　<li>テスト1</li>
          </ul>
     </li>
  </ul>
</div>

  $(function(){$('#tree1').jstree({
    "core" : {
    "themes" : {
      "variant" : "small"
    }
  },
  "plugins" : [ "wholerow", "checkbox", "search"]

  });
  });

試したこと

コードの<li>テスト1</li>部分で<a href>でリンク指定をしてもだめ。
公式のドキュメントを見たところ、JSTREEの場合は内部でテキストをリンクへ変換するので無視されてしまうとありましたのでこの方法ではだめということがわかりました。
ページ移動させるためには、「ページ移動をするためにはchanged.jstreeイベントを検知した時に必要な処理を行ってください」とあったのですが、昨日初めて触り始めたばかりで、changed.jstreeイベントを具体的にどのように実装すればいいのかわかりません。

補足情報（FW/ツールのバージョンなど）

jstreeのバージョン：3.3.5
jstree公式サイトリンク

kei344

2018/03/09 16:37

プラグイン／ライブラリは公式配布サイトのURLを質問文に追記ください。（URLにはリンクを張ることができます）また、質問文のコードはコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。

kei344

2018/03/10 08:49

ご自身で試されたコードを質問文に追記し、「何」が「どのように」わからないのか、コードのどの部分で詰まっているのかなどを具体的に追記していただけませんか？

行動規範の内容に同意します

回答1件

ベストアンサー

公式のドキュメントにイベント時のコードがあるので、そこからはじめてみてはいかがでしょうか。

【jsTree】
https://www.jstree.com/docs/events/

js
1$('#jstree')
2  // listen for event
3  .on('changed.jstree', function (e, data) {
4    var i, j, r = [];
5    for(i = 0, j = data.selected.length; i < j; i++) {
6      r.push(data.instance.get_node(data.selected[i]).text);
7    }
8    $('#event_result').html('Selected: ' + r.join(', '));
9  })
10  // create the instance
11  .jstree();