サイトのトップへ戻る

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>


クラスを使って初期状態を設定する

ノードを最初から選択状態にするには、 <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>
…


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 オプションに加え、 dataurlを使用するための関数を設定できます。 この関数はカレントインスタンスのスコープ内で実行され、読み込まれたノードを示すパラメータが渡されます。 これらの関数によって取得できる値はそれぞれ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


注意事項

  • 本サイトはjsTreeのサイトを翻訳したものであり、jsTreeに関する著作権は全てそちらに帰属しています。
  • 誤訳が判明した場合、より分かりやすい言い回しが見つかった場合、原文が変更された場合などにより、本サイトの内容は予告なく変更されることがあります。
  • 誤訳についての指摘や未翻訳部分についての助言など、ご意見についてはこちらへいただけると助かります。
  • 翻訳の内容には誤りがある可能性があります。本サイトの記述内容によって不利益が発生した場合も、サイト管理人は一切の責任を負いません。
  •   

エンジェル戦記