jsTreeドキュメント日本語訳
HTMLを使ってツリーを埋め込む
基本的なマークアップ
jsTree では、決められて書式にしたがってマークアップされた順不同のリストをツリー構造にできます。
<ul>
ノードと、その入れ子となる<li>
ノード、および<li>
内のテキストが、マークアップに最低限必要なものです。
<ul>
をコンテナで囲み、そのコンテナ上でインスタンスを作成する必要があります。こんな感じです。:$('#html1').jstree();
.
<div id="html1">
<ul>
<li>Root node 1</li>
<li>Root node 2</li>
</ul>
</div>
- Root node 1
- Root node 2
入れ子を持つノード
単純に <ul>
を入れ子にした子ノードを持つノードを作成します。
jstreeは内部でテキストをリンクへ変換するので、既にマークアップ内にリンクが記載されていてもjstreeは無視します。Child node 2
のように。
クリックをしてもユーザーのページ移動は行われません。ページ移動をするためにはchanged.jstree
イベントを検知した時に必要な処理を行ってください。
詳細についてはイベントハンドリングの項目を読んでください。
<div id="html1">
<ul>
<li>Root node 1
<ul>
<li>Child node 1</li>
<li><a href="#">Child node 2</a></li>
</ul>
</li>
</ul>
</div>
- Root node 1
- Child node 1
- Child node 2
クラスを使って初期状態を設定する
ノードを最初から選択状態にするには、 <a>
エレメントに jstree-clicked
クラスを設定することで可能です。
同様に、<li>
エレメントにjstree-open
クラスを設定して最初から開いた状態にすることができます。
そうすることで中の子エレメントが見えるようになります。
<li>
エレメントにid
属性を追加することによって、ノードに唯一の IDを設定すると良いでしょう。
jstreeイベント発生時にイベントが発生したエレメントのIDを取得し、内部で同期処理を行う必要がある場合に便利です。
…
<li class="jstree-open" id="node_1">Root</li>
<ul>
<li>
<a href="#" class="jstree-clicked">Child</a>
</li>
</ul>
</li>
…
- Root
data 属性を使って初期状態を設定する
data-jstree
属性を使ってノードの状態を設定することもできます。
以下のいずれかを組み合わせて使用することができます。: opened
, selected
, disabled
, icon
.
アドレス(/を含むもの)を設定することで画像をノードアイコンとして表示できます。
アイコンを表すのに使われる文字列をクラスとして<i>
エレメントに適用することもできます。
例えば、あなたがTwitter Bootstrapを使用している場合は、"icon" : "glyphicon glyphicon-leaf"
を使って葉ノード(子ノードを持たないノード)のアイコンを表示できます。
<li data-jstree='{"opened":true,"selected":true}'>Root
<ul>
<li data-jstree='{"disabled":true}'>Child</li>
<li data-jstree='{"icon":"http://jstree.com/tree.png"}'>
Child</li>
<li data-jstree='{"icon":"glyphicon glyphicon-leaf"}'>
Child</li>
</ul>
</li>
- Root
- Child
- Child
- Child
AJAXを使った読み込み
また、AJAXを使ってサーバから送られてくるHTMLにツリーを埋め込むこともできます。 この方式は前述のものと同じですが、HTMLはコンテナ内には記載せず、サーバーからの応答時に埋め込まれているという点が唯一の違いです。
このオプションを使用するには、 $.jstree.defaults.core.data
コンフィグオプションを使う必要があります。
標準のjQuery AJAX 設定とjstreeを使うだけで、AJAXで送ったリクエストがツリー構造となってサーバから自動で返ってきます。
UL ノードを入れ子として持たない LIノードにjstree-closed
クラスを追加すると、jstreeはこのノードが開かれるとすぐ、もう一度AJAX の実行を作成します。
標準のjQuery ajax オプションに加え、 data
とurl
を使用するための関数を設定できます。
この関数はカレントインスタンスのスコープ内で実行され、読み込まれたノードを示すパラメータが渡されます。
これらの関数によって取得できる値はそれぞれURLやデータとして使用できます。
$('#tree').jstree({
'core' : {
'data' : {
'url' : 'ajax_nodes.html',
'data' : function (node) {
return { 'id' : node.id };
}
}
});
// Example response:
<ul>
<li>Node 1</li>
<li class="jstree-closed">Node 2</li>
</ul>
- Node 1
- Node 2