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');
});


<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>jsTree test</title>
  <!-- 2 load the theme CSS file -->
  <link rel="stylesheet" href="dist/themes/default/style.min.css" />
</head>
<body>
  <!-- 3 setup a container element -->
  <div id="jstree">
    <!-- in this example the tree is populated from inline HTML -->
    <ul>
      <li>Root node 1
        <ul>
          <li id="child_node_1">Child node 1</li>
          <li>Child node 2</li>
        </ul>
      </li>
      <li>Root node 2</li>
    </ul>
  </div>
  <button>demo button</button>

  <!-- 4 include the jQuery library -->
  <script src="dist/libs/jquery.js"></script>
  <!-- 5 include the minified jstree source -->
  <script src="dist/jstree.min.js"></script>
  <script>
  $(function () {
    // 6 create an instance when the DOM is ready
    $('#jstree').jstree();
    // 7 bind to events triggered on the tree
    $('#jstree').on("changed.jstree", function (e, data) {
      console.log(data.selected);
    });
    // 8 interact with the tree - either way is OK
    $('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');
    });
  });
  </script>
</body>
</html>

注意事項

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

jsTreeドキュメント日本語訳

はじめよう-全体を通して見ます

jsTreeのダウンロード

Download jsTree

jsTree テーマのインクルード

Include a jsTree theme

コンテナのセットアップ

Setup a container

jQueryのインクルード

Include jQuery

jsTreeのインクルード

Include jsTree

インスタンスを作成する

Create an instance

イベントの発生を検知する

Listen for events

インスタンスを操作する

Interact with your instances

注意事項