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)を見たい場合はここをクリックしてください