サイトのトップへ戻る
jsTreeドキュメント日本語訳
はじめよう-全体を通して見ます
jsTreeのダウンロード
必要なファイルは全て、ダウンロードしたフォルダのdist/
配下にあります。
jsTree テーマのインクルード
テーマも読み込むことはできますが、パフォーマンス的に見てCSSファイルをインクルードするのがベストです。
<link rel="stylesheet" href="dist/themes/default/style.min.css" />
コンテナのセットアップ
これはツリー構造を表示するエレメントで、<div>
で囲むだけで十分です。
この例では、(JSONのような)他のデータが一切ない入れ子状態の <ul>
を持っています。
<div id="jstree_demo_div"></div>
jQueryのインクルード
ウェブサイト上にバージョン1.9.0 以上のjQueryを設置する必要があります。
<script src="dist/libs/jquery.js"></script>
jsTreeのインクルード
公開用の簡易バージョン: dist/jstree.min.js
をインクルードします。開発用バージョン: dist/jstree.js
もあります。
<script src="dist/jstree.min.js"></script>
インスタンスを作成する
DOM(Document Object Model)の準備ができたら、jstreeインスタンスの作成を開始できます。
$(function () { $('#jstree_demo_div').jstree(); });
イベントの発生を検知する
ユーザー(もしくはあなた)の操作によってツリーに何らかの変化が発生すると、jsTreeはイベントを使ってあなたに通知します。 そのためjstreeにイベントを紐付けるのはクリックするのと同じくらい簡単です。 APIドキュメントには、イベントの一覧とそのイベントが通知する情報が記載されています。
$('#jstree_demo_div').on("changed.jstree", function (e, data) {
console.log(data.selected);
});
インスタンスを操作する
インスタンスの準備ができたら、インスタンスのメソッドを実行することができます。APIドキュメントには使用可能なメソッドの一覧があります。以下三つの例では全く同じことを行っています。
$('button').on('click', function () {
$('#jstree').jstree(true).select_node('child_node_1');
$('#jstree').jstree('select_node', 'child_node_1');
$.jstree.reference('#jstree').select_node('child_node_1');
});