サイトのトップへ戻る

jsTreeドキュメント日本語訳

プラグインとは何か?

jsTree はいくつかの機能をコア部分から抜き出して持っており、必要な時にのみ使用することができます。 プラグインを有効にするには、plugins 設定オプション を使って有効にするプラグイン名に追加します。

例えば、全てのプラグインを有効にするには以下のようにします: (プラグインは必要なもののみを有効にするようにしてください)

"plugins" : [
	"checkbox",
	"contextmenu",
	"dnd",
	"massload",
	"search",
	"sort",
	"state",
	"types",
	"unique",
	"wholerow",
	"changed",
	"conditionalselect"
]

以降では各プラグインの簡単な概要を記載します。



 Changed プラグイン

このプラグインでは、選択項目の変更に関する追加情報が追加されます。 このプラグインをplugins設定オプションに含めると、各changed.jstree イベントのデータには changedという名前の新たなプロパティが含まれるようになります。このプロパティでは、最後に changed.jstreeイベントが発生した以降の changedノードとdeselected ノードに関する情報が取得されます。

$(function () {
  $("#plugins")
    .on("changed.jstree", function (e, data) {
      console.log(data.changed.selected); // newly selected
      console.log(data.changed.deselected); // newly deselected
    })
    .jstree({
      "plugins" : [ "changed" ]
    });
});


 Checkbox プラグイン

このプラグインでは、各ノードの前にチェックボックスのアイコンを描写し、複数選択がとても簡単にできるようになります。
It also supports tri-state behavior, meaning that if a node has a few of its children checked it will be rendered as undetermined, and state will be propagated up. You can also fine tune the cascading options with the cascade config option.
Keep in mind when cascading checkbox will check even disabled nodes.

Undetermined state is automatically calculated, but if you are using AJAX and loading on demand and want to render a node as underemined pass "undetermined" : true in its state.

APIのページの checkbox プラグイン設定オプション で全ての詳細を見ることができます。

$(function () {
  $("#plugins1").jstree({
    "checkbox" : {
      "keep_selected_style" : false
    },
    "plugins" : [ "checkbox" ]
  });
});
  • Root node
    • Child node 1
    • Child node 2


 Conditionalselect プラグイン

このプラグインはactivate_node function(ユーザーがノードを選択しようとした時の呼び出しを取得するfunction) を上書きし、function が呼び出されるのをコールバックを使って防ぎます。

$(function () {
  $("#plugins10").jstree({
    "conditionalselect" : function (node, event) {
      return false;
    },
    "plugins" : [ "conditionalselect" ]
  });
});
  • Root node
    • Child node 1
    • Child node 2


 Contextmenu プラグイン

このプラグインでは、ノードを右クリックして設定した動作一覧をメニューに表示することが可能になります。

APIのページの contextmenu プラグイン設定オプション で全ての詳細を見ることができます。

$(function () {
  $("#plugins2").jstree({
     "core" : {
       // so that create works
       "check_callback" : true
     },
    "plugins" : [ "contextmenu" ]
  });
});
  • Root node
    • Context click me


 Drag & drop プラグイン

このプラグインでは、ツリー内にあるノードをドラッグ・ドロップしてツリーを再配置することができるようになります。

APIのページの dnd プラグイン設定オプション で全ての詳細を見ることができます。

$(function () {
  $("#plugins3").jstree({
    "core" : {
      "check_callback" : true
    },
    "plugins" : [ "dnd" ]
  });
});
  • Root node
    • Child node 1
    • Child node 2
  • Root node 2


 Massload プラグイン

このプラグインでは、一回のリクエストで(遅延読み込みを使って)複数のノードを読み込むことができるようになります。

APIのページの massload プラグイン設定オプション で全ての詳細を見ることができます。

$(function () {
  $("#plugins10").jstree({
    "core" : {
      "data" : { .. AJAX config .. }
    },
    "massload" : {
      "url" : "/some/path",
      "data" : function (nodes) {
        return { "ids" : nodes.join(",") };
      }
    }
    "plugins" : [ "massload", "state" ]
  });
});


 Search プラグイン

このプラグインでは、ツリー内の項目を検索することができるようになります。検索内容と一致するノードのみを表示することも可能です。

APIのページの search プラグインの設定オプションで全ての詳細を見ることができます。

$(function () {
  $("#plugins4").jstree({
    "plugins" : [ "search" ]
  });
  var to = false;
  $('#plugins4_q').keyup(function () {
    if(to) { clearTimeout(to); }
    to = setTimeout(function () {
      var v = $('#plugins4_q').val();
      $('#plugins4').jstree(true).search(v);
    }, 250);
  });
});
  • Root node
    • Child node 1
    • Child node 2
  • Root node 2


 Sort プラグイン

このプラグインではcomparison 設定オプション機能にしたがって、同一階層にある全てのノードを自動的に再配置します。既定ではアルファベット順に並べられます。

$(function () {
  $("#plugins5").jstree({
    "plugins" : [ "sort" ]
  });
});
  • Root node
    • 2
    • 1
    • 3
    • 0
  • Root node 2


 State プラグイン

このプラグインではノードの展開状態と選択状態を全てユーザーのブラウザ内に保存するので、同じツリーのあるページをもう一度開くと、前回の状態が復元されます。

APIのページのstate プラグインの設定オプションで全ての詳細を見ることができます。右にあるツリーの項目を選択してこのページを再読み込みすると、変更内容が保持されたままで表示されます。

$(function () {
  $("#plugins6").jstree({
    "state" : { "key" : "demo2" },
    "plugins" : [ "state" ]
  });
});
  • Root node
    • A
    • few
    • more
    • nodes
  • Root node 2


 Types プラグイン

このプラグインでは、各ノードのグループ用にあらかじめ定義した型を追加することができます。つまり、各グループのネストルールとアイコンを簡単に制御できます。

ノードの型を設定するには、set_typeを使用するか、もしくはノードのデータが設定されたtype プロパティを渡します。

APIのページの types プラグインの設定オプションと関数で全ての詳細を見ることができます。

$(function () {
  $("#plugins7").jstree({
    "types" : {
      "default" : {
        "icon" : "glyphicon glyphicon-flash"
      },
      "demo" : {
        "icon" : "glyphicon glyphicon-ok"
      }
    },
    "plugins" : [ "types" ]
  });
});
  • Root node
    • Node
  • Root node 2


 Unique プラグイン

同一階層に同じ名前のノードが存在できないようにします。このプラグインにオプションはありません。名前の変更や、既に同じ名前のノードを持っている親へのノード移動をさせないようにするだけです。

$(function () {
  $("#plugins8").jstree({
    "core" : {
      "check_callback" : true
    },
    "plugins" : [ "unique", "dnd" ]
  });
});
  • Root node
    • Node
  • Root node 2
    • Node


 Wholerow プラグイン

各ノードをブロックレベルで表示して、簡単に選択できるようにします。ツリーが大きい場合、古いブラウザだと遅延が発生する可能性があります。

$(function () {
  $("#plugins9").jstree({
    "plugins" : [ "wholerow" ]
  });
});
  • Root node
    • Node
  • Root node 2


古いサイト (v.1)を見たい場合はここをクリックしてください



注意事項

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

エンジェル戦記