jsTreeドキュメント日本語訳
API(プラグイン)
チェックボックスプラグイン
このプラグインでは、各ノードの左側にあるチェックボックスアイコンを描写します。複数のノードを選択することがとても簡単にできるようになります。
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.
$.jstree.defaults.checkbox
checkbox plugin
チェックボックスプラグインの全ての既定値を保持しています。
$.jstree.defaults.checkbox.visible
checkbox plugin
チェックボックスを表示するかどうかを示す boolean 型の値 (後でshow_checkboxes()
や hide_checkboxes
を使って変更することができます)。既定値は true
.
$.jstree.defaults.checkbox.three_state
checkbox plugin
a boolean indicating if checkboxes should cascade down and have an undetermined state. 既定値はtrue
。
$.jstree.defaults.checkbox.whole_node
checkbox plugin
ノード上のどこかをクリックするとそのチェックボックスもクリックしたことになるかを示す boolean 型の値。既定値は true
。
$.jstree.defaults.checkbox.keep_selected_style
checkbox plugin
選択されたノードのスタイルを保持するか削除するかを示す boolean 型の値。既定値は true
。
$.jstree.defaults.checkbox.cascade
checkbox plugin
This setting controls how cascading and undetermined nodes are applied.
If 'up' is in the string - cascading up is enabled, if 'down' is in the string - cascading down is enabled, if 'undetermined' is in the string - undetermined nodes will be used.
If three_state
is set to true
this setting is automatically set to 'up+down+undetermined'. Defaults to ''.
$.jstree.defaults.checkbox.tie_selection
checkbox plugin
この設定では、チェックボックスを一般的なツリーの選択状態に紐付けるか、チェックボックスプラグインによって管理されている内部配列と紐付けるかを制御します。
既定値はtrue
です。設定を変更した場合にどういった動作になるかを正確に把握している場合にのみ、false
を設定してください。
_undetermined ()
checkbox plugin
private
必要に応じて、未確定状態の設定を行います。内部的に使用されます。
show_checkboxes ()
checkbox plugin
チェックボックスのアイコンを表示します
hide_checkboxes ()
checkbox plugin
チェックボックスのアイコンを非表示にします
toggle_checkboxes ()
checkbox plugin
ノードアイコンの表示状態を切り替えます
is_undetermined (obj)
ノードが未確定状態かどうかを確認します。
obj
mixed
Returns
Boolean
check_node (obj)
checkbox plugin
ノードにチェックを入れます (チェックボックスのtie_selection設定がfalseの場合のみ、またはselect_nodeが内部で実行された場合)
-
obj
mixed
配列を使って複数のノートにチェックを入れられます。
-
Triggers
check_node.jstree
check_node.jstree Event
checkbox plugin
ノードがチェックされた時に発生するイベント(チェックボックスのtie_selection設定がfalseの場合のみ)
-
node
Object
-
selected
Array
現在選択しているノード -
event
Object
(もしあれば)この check_nodeをトリガーにしているイベント
uncheck_node (obj)
checkbox plugin
ノードのチェックを外します (チェックボックスのtie_selection設定がfalseの場合のみ、またはdeselect_nodeが内部で実行された場合)
obj
mixed
配列を使って複数のノードのチェックを外せます。
Triggers
uncheck_node.jstree
uncheck_node.jstree Event
checkbox plugin
ノードのチェックが外された時に発生するイベント (チェックボックスのtie_selection設定がfalseの場合のみ)
node
Object
-
selected
Array
現在選択しているもの -
event
Object
(もしあれば)この uncheck_nodeをトリガーにしているイベント
check_all ()
checkbox plugin
ツリー内の全てのノードにチェックを入れます (チェックボックスのtie_selection設定がfalseの場合のみ、またはselect_allが内部で実行された場合)
Triggers
check_all.jstree
changed.jstree
check_all.jstree Event
checkbox plugin
全てのノードにチェックが入れられた時に発生するイベント (チェックボックスのtie_selection設定がfalseの場合のみ)
selected
Array
現在選択しているもの
uncheck_all ()
checkbox plugin
全てのノードのチェックを外します (チェックボックスのtie_selection設定がfalseの場合のみ,もしくは内部で deselect_all が実行された時)
Triggers
uncheck_all.jstree
uncheck_all.jstree Event
checkbox plugin
全てのノードのチェックが外された時に発生するイベント (チェックボックスのtie_selection設定がfalseの場合のみ)
-
node
Object
前に選択していたもの -
selected
Array
現在選択しているもの
is_checked (obj)
checkbox plugin
ノードにチェックが入れられているかどうかを確認する (tie_selectionの設定が有効になっている場合、この関数はis_selectedと同じ値を返します。)
obj
mixed
Returns
Boolean
get_checked ([full])
checkbox plugin
チェックが入れられている全てのノードの配列を取得します。 (tie_selectionの設定が有効になっている場合、この関数はget_selectedと同じ値を返します。)
-
full
mixed
`true`を設定した場合、取得される配列は完全なノードオブジェクトになります。falseを設定した場合 - IDのみが取得されます。
Returns
Array
get_top_checked ([full])
checkbox plugin
チェックが入っている中で最上部のノード全てを配列で取得します。(チェックが入っているノードの子ノードは無視されます。) (tie_selectionの設定が有効になっている場合、この関数はget_top_selectedと同じ値を返します。)
-
full
mixed
`true`を設定した場合、取得される配列は完全なノードオブジェクトになります。falseを設定した場合 - IDのみが取得されます。
Returns
Array
get_bottom_checked ([full])
checkbox plugin
ェックが入っている中で最下部のノード全てを配列で取得します。 (選択状態の親は無視されます。) (tie_selectionの設定が有効になっている場合、この関数はget_bottom_selectedと同じ値を返します。)
-
full
mixed
`true`を設定した場合、取得される配列は完全なノードオブジェクトになります。falseを設定した場合 - IDのみが取得されます。
Returns
Array
コンテキストメニュープラグイン
ノードが右クリックされた時コンテキストメニューを表示します。
$.jstree.defaults.contextmenu
contextmenu plugin
コンテキストメニュープラグインの全ての既定値を保持しています。
$.jstree.defaults.contextmenu.select_node
contextmenu plugin
コンテキストメニューが表示された時、そのノードを選択状態にするかどうかを示す boolean 型の値。既定値は true
。
$.jstree.defaults.contextmenu.show_at_node
contextmenu plugin
メニューをノードと並べて表示するかどうかを示す boolean 型の値。既定値は true
で、true
でない場合はマウスの位置が使われます。
$.jstree.defaults.contextmenu.items
contextmenu plugin
an object of actions, or a function that accepts a node and a callback function and calls the callback function with an object of actions available for that node (you can also return the items too).
各アクションは、キー(重複のない名前)と以下のプロパティを持つオブジェクトによって構成される (label と action のみが必須プロパティ):
separator_before
- この項目の前に区切りを入れるかどうかを示す boolean 型の値separator_after
- この項目の後に区切りを入れるかどうかを示す boolean 型の値_disabled
- このアクションを無効にするかを示す boolean 型の値label
- 文字列 - このアクションの名前 (could be a function returning a string)action
- この項目が選択された場合に実行される関数icon
- 文字列。アイコンへのパスもしくはクラス名が使用できる。 カレントディレクトリにある画像を使いたい場合は頭に./
をつけてください。つけない場合、文字列はクラス名と見なされます。shortcut
- メニューが開いている場合、このアクションをトリガーにするキーコード -例えば、名前変更操作用のキーコード113
はF2キー)shortcut_label
- ショートカットラベル (例えば、名前変更操作はF2
キーできる、といったような)
"shortcut" : 113,
"shortcut_label" : 'F2',
"icon" : "glyphicon glyphicon-leaf",
if(!('oncontextmenu' in document.body) && ('ontouchstart' in document.body)) {
var el = null, tm = null;
this.element
.on("touchstart", ".jstree-anchor", function (e) {
el = e.currentTarget;
tm = +new Date();
$(document).one("touchend", function (e) {
e.target = document.elementFromPoint(e.originalEvent.targetTouches[0].pageX - window.pageXOffset, e.originalEvent.targetTouches[0].pageY - window.pageYOffset);
e.currentTarget = e.target;
tm = ((+(new Date())) - tm);
if(e.target === el && tm > 600 && tm < 1000) {
e.preventDefault();
$(el).trigger('contextmenu', e);
}
el = null;
tm = null;
});
});
}
show_contextmenu (obj [, x, y])
contextmenu plugin
指定したノードのコンテキストメニューを準備して表示する
-
obj
mixed
ノード -
x
Number
メニューを表示するための、ドキュメントとの相対X座標 -
y
Number
メニューを表示するための、ドキュメントとの相対Y座標 -
e
Object
このコンテキストメニューをトリガーにできるイベント
Triggers
show_contextmenu.jstree
_show_contextmenu (obj, x, y, i)
contextmenu plugin
private
指定したノードの準備済みコンテキストメニューを表示する
-
obj
mixed
ノード -
x
Number
メニューを表示するための、ドキュメントとの相対X座標 -
y
Number
メニューを表示するための、ドキュメントとの相対y座標 -
i
Number
表示する項目のオブジェクト
-
Triggers
show_contextmenu.jstree
show_contextmenu.jstree Event
contextmenu plugin
ノードのコンテキストメニューが表示された時に発生するイベント
-
node
Object
ノード -
x
Number
ドキュメントとの相対X座標 -
y
Number
ドキュメントとの相対y座標
context_parse.vakata Event
contextmenu plugin
コンテキストメニューが解析されたときにドキュメントで発生するイベント (HTML is built)
-
reference
jQuery
右クリックされたエレメント -
element
jQuery
メニュー自身の DOM エレメント -
position
Object
メニューの x & y 座標
context_show.vakata Event
contextmenu plugin
コンテキストメニューが表示された時にドキュメントで発生するイベント
-
reference
jQuery
右クリックされたエレメント -
element
jQuery
メニュー自身の DOM エレメント -
position
Object
メニューの x & y 座標
context_hide.vakata Event
contextmenu plugin
コンテキストメニューが非表示になった時にドキュメントで発生するイベント
reference
jQuery
右クリックされたエレメント-
element
jQuery
メニュー自身の DOM エレメント -
position
Object
メニューの x & y 座標
ドラッグ&ドロップ用プラグイン
ツリー上でのノードのドラッグ&ドロップを可能にし、移動やコピー操作ができるようになります。
$.jstree.defaults.dnd
dnd plugin
ドラッグ&ドロップ用プラグインの全ての既定値を保持しています。
$.jstree.defaults.dnd.copy
dnd plugin
ドラッグ中に(メタキーやCtrlキーを押すことによって)コピーができるかどうかを示す boolean 型の値 。既定値はtrue
。
$.jstree.defaults.dnd.open_timeout
dnd plugin
ノードがドラッグされている状態をどれだけの時間保持するかを示す数字。既定値は 500
。
$.jstree.defaults.dnd.is_draggable
dnd plugin
ノードがドラッグされているときに呼び出される関数。ツリーのスコープ内で呼びされ、ドラッグされているノードを引数(配列)として受け取ります。 - false
が返ってきた場合はドラッグが妨げられています
$.jstree.defaults.dnd.check_while_dragging
dnd plugin
ユーザーがノードをドラッグしている間もチェックを入れるかどうかを示すboolean 型の値(ドロップした時のみにのチェックを入れるのではなく)。既定値は true
$.jstree.defaults.dnd.always_copy
dnd plugin
ドラッグ&ドロップで、このツリーからノードを(移動だけでなく)コピーできるかどうかを示すboolean 型の値。既定値 false
$.jstree.defaults.dnd.inside_pos
dnd plugin
ノードが"内部"にドロップされる時、この設定はノードがどの位置に置かれるかを示します。 - 数字か文字列が設定できます: "first" (0と同じ意味) もしくは "last"。既定値は 0
$.jstree.defaults.dnd.drag_selection
dnd plugin
選択状態のノードをドラッグする時、全ての選択状態のノードをドラッグするのか、一つのノードのみをドラッグするのかをこの設定で制御します。既定値は true
で、選択状態のノードをドラッグすると全ての選択状態のノードがドラッグされます。
$.jstree.defaults.dnd.touch
dnd plugin
タッチデバイスでドラッグ&ドロップが動作するかどうかを制御します。trueが設定された場合、 ドラッグ&ドロップはデスクトップブラウザと同様に動作します。スクロールで問題が発生する場合もあります。 falseが設定された場合、タッチデバイスでドラッグ&ドロップは動作しません。第三の選択肢として文字列"selected"を設定できます。- これは、タッチデバイスでは選択状態のノードのみをドラッグできます。
$.jstree.defaults.dnd.large_drop_target
dnd plugin
アンカー上の項目だけでなく、ノード上の項目にもドラップできるかを制御します。既定ではノードアンカーだけが有効なドロップ対象です。 行表示用プラグインと一緒に動作させるのがベストです。If enabled on mobile depending on the interface it might be hard for the user to cancel the drop, since the whole tree container will be a valid drop target.
$.jstree.defaults.dnd.large_drag_target
dnd plugin
テキストやアイコン部分だけではなく、ノードのどの部分からでもドラッグを開始できるかどうかを制御します。行表示用プラグインと一緒に動作させるのがベストです。K モバイルの場合、インタフェースによってはツリーのスクロールで問題が発生するので注意してください。 - その場合はtouch option に "selected"を設定してください。
dnd_scroll.vakata Event
dnd plugin
ドラッグによってスクロールが発生した場合のトリガー
-
data
Mixed
$.vakata.dnd.start実行の際に渡されたデータ -
element
DOM
ドラッグされた DOM エレメント -
helper
jQuery
マウスの隣に表示されるヘルプ -
event
jQuery
スクロールしているエレメント
dnd_start.vakata Event
dnd plugin
ドラッグが開始された時にドキュメントで発生するイベント
data
Mixed
$.vakata.dnd.start実行の際に渡されたデータ-
element
DOM
ドラッグされた DOM エレメント -
helper
jQuery
マウスの隣に表示されるヘルプ -
event
Object
ドラッグ開始を引き起こしたイベント (おそらくはマウス移動)
dnd_move.vakata Event
dnd plugin
ドラッグ中にドキュメントで発生するイベント
-
data
Mixed
$.vakata.dnd.start実行の際に渡されたデータ -
element
DOM
ドラッグされた DOM エレメント -
helper
jQuery
マウスの隣に表示されるヘルプ -
event
Object
ドラッグ開始を引き起こしたイベント (最も可能性が高いのはマウス移動)
dnd_stop.vakata Event
dnd plugin
ドラッグが終了した (ドラッグされていたエレメントがドロップされた)時にドキュメントで発生するイベント
-
data
Mixed
$.vakata.dnd.start実行の際に渡されたデータ -
element
DOM
ドラッグされた DOM エレメント -
helper
jQuery
マウスの隣に表示されるヘルプ -
event
Object
終了を引き起こしたイベント
一括読み込み用プラグイン
jsTreeに一括読み込み機能を追加します。これにより、一回のリクエストで複数のノードを読み込むことができるようになります (読み込みが遅い場合にのみ有効です)。
$.jstree.defaults.massload
massload plugin
一括読み込みの設定
標準の jQuery-like AJAX のコンフィグにこれを設定することが可能です。
標準の jQuery ajax オプションに加えて、data
や url
を使うための関数を設定することができます, この機能はカレントインスタンスのスコープ内で実行され、読み込みに必要なノードIDを示すパラメータが渡されます。これら関数の戻り値は使用することができます。 the return value of those functions will be used.
You can also set this to a function, that function will receive the node IDs being loaded as argument and a second param which is a function (callback) which should be called with the result.
Both the AJAX and the function approach rely on the same return value - an object where the keys are the node IDs, and the value is the children of that node as an array.
{
"id1" : [{ "text" : "Child of ID1", "id" : "c1" }, { "text" : "Another child of ID1", "id" : "c2" }],
"id2" : [{ "text" : "Child of ID2", "id" : "c3" }]
}
検索用プラグイン
jsTreeに検索機能を追加します。
$.jstree.defaults.search
search plugin
検索用プラグインの既定値を全て保持しています。
$.jstree.defaults.search.ajax
search plugin
a jQuery-like AJAX 設定。サーバに結果を問い合わせる必要がある場合に jstree が使用します。
リクエストにはstr
パラメータ (検索する文字列) が追加されます。ノーがドIDの検索が制限されている場合は、内部でオプションパラメータが追加されます。
展開されるノードのJSON型配列が検索結果となり、合致するノードが画面に表示されます。
この設定をfalse
にするとサーバへの問い合わせは行いません。これを関数に設定することもできます。関数はインスタンスのスコープ内で実行され、三つのパラメータを受け取ります。
- 検索文字列、読み込んだノードの配列が設定されたコールバック関数、検索を制限するオプションのノードIDの三つです。
$.jstree.defaults.search.fuzzy
search plugin
あいまい検索をするかどうかを示します chnd3
で検索するとchild node 3
)も検索対象とします。 既定値は false
。
$.jstree.defaults.search.case_sensitive
search plugin
検索で大文字と小文字を区別するかどうかを示します。既定値は false
。
$.jstree.defaults.search.show_only_matches
search plugin
(by default)合致するノードのみを表示するようにツリーをフィルタするかどうかを示します。(古いブラウザの場合、ツリーが大きいと動作が重くなるので気をつけてください)。
検索メソッドを実行する場合、この設定は実行中に変更できます。既定値は false
。
$.jstree.defaults.search.close_opened_onclear
search plugin
検索がクリアされる場合や新たに検索が行われる場合に、検索結果によって展開された全てのノードを閉じるかどうかを示します。既定値はtrue
。
$.jstree.defaults.search.search_leaves_only
search plugin
検索結果に含めるのをleafノードのみにするかどうかを示します。既定値はfalse
。
$.jstree.defaults.search.search_callback
search plugin
関数を設定した場合、それはカレントインスタンスのスコープ内で二つの引数を渡されて実行されます。 - 二つの引数とは検索文字列とノードです。(ノードはツリー構造内の全てのノードなので、注意して使ってください)。
この関数がtruthyな値を返した場合、このノードは一致したと見なされます。(search_only_leaves にtrueが設定されてノードがleafでない場合だと、画面には表示されないかもしれません)。既定値はfalse
。
search (str [, skip_async])
search plugin
指定された文字列を元にツリーのノードを検索するために使用される。
-
str
String
検索文字列 -
skip_async
Boolean
trueが設定された場合、例えサーバーに問い合わせる設定をしていても問い合わせをしません。 -
show_only_matches
Boolean
trueが設定された場合、一致するノードのみが表示されます。 (いブラウザの場合、ツリーが大きいと動作が遅くなるので気をつけてください) -
inside
mixed
子ノードの検索を制限するためのオプションノード -
append
Boolean
trueが設定された場合、検索結果は前回の検索結果に追加されます。
Triggers
search.jstree
search.jstree Event
search plugin
検索が完了した後に発生するイベント
-
nodes
jQuery
一致するノードの jQuery コレクション -
str
String
検索文字列 res
Array
一致するノードを表すオブジェクトのコレクション
clear_search ()
search plugin
最後の検索結果をクリアするために使います。 (フィルターが有効の場合、クラスを削除して全てのノードを表示します )
Triggers
clear_search.jstree
clear_search.jstree Event
search plugin
検索が完了した後に発生するイベント
-
nodes
jQuery
一致するノードの jQuery コレクション (最後に行った検索結果から) -
str
String
検索文字列 (最後に検索した文字) -
res
Array
一致するノードを表すオブジェクトのコレクション (最後に行った検索結果から)
_search_open (d)
search plugin
private
検索結果を表示するために開く必要があるノードを開きます。内部でのみ使用されます。
-
d
Array
ノードIDの配列
並び替え用プラグイン
並び替え機能に従い、ツリー上で同階層にある全てのノードを自動的に並び替えます。
$.jstree.defaults.sort
sort plugin
ノードの並び替えに使われる設定関数
これはツリーのコンテキスト内で実行され、引数として二つのノードを受け取り、戻り値に 1
か -1
を返します。
sort (obj [, deep])
sort plugin
private
ノードの子を並び替えるために使用されます
-
obj
mixed
ノード -
deep
Boolean
`true` が設定された場合、ノードは再帰的に並び替えられますj。
Triggers
search.jstree
sort (obj [, deep])
sort plugin
private
ノードの子を並び替えるために使用されます
-
obj
mixed
ノード -
deep
Boolean
`true` が設定された場合、ノードは再帰的に並び替えられますj。
Triggers
search.jstree
状態保存用 プラグイン
利用可能なオプション(ローカルストレージ, クッキー, など)を使って、ツリーの状態(ノードの選択状態や開閉状態)をあなたのコンピュータ上に保存します。
$.jstree.defaults.state
state plugin
状態保存用 プラグインの全ての既定値を保持しています。
$.jstree.defaults.state.key
state plugin
現在のツリー状態を保存する時に使われるキー文字列 (複数のツリーを使って開発している場合は変更してください)。既定値は jstree
。
$.jstree.defaults.state.events
state plugin
状態保存をトリガーとするイベントをスペースで区切った一覧。既定値は changed.jstree open_node.jstree close_node.jstree
。
$.jstree.defaults.state.ttl
state plugin
保存した状態が期限切れになるまでのミリ秒単位の時間。既定値は 'false' -期限切れにはならないという意味です。
$.jstree.defaults.state.filter
state plugin
状態保存の前に実行される関数-状態オブジェクトが引数として渡されます。保存する状態の中で不要な部分を削除するのに使用できます。
state_ready.jstree Event
state plugin
状態保存用プラグインが状態の復元を完了した時に発生するイベント (復元する状態がない場合は、復元準備ができた直後のタイミングで発生)。
save_state ()
state plugin
状態を保存します
restore_state ()
state plugin
ユーザーのコンピュータから状態を復元します
clear_state ()
state plugin
ユーザーのコンピュータに保存された状態情報をクリアする
Types plugin
ノードグループ用に定義した型を追加できるようになります。これにより、入れ子ルールや各グループアイコンの制御が簡単にできるようになります。
$.jstree.defaults.types
types plugin
全ての型をキーと値のペアとして保持するオブジェクト。キーには型名、値には以下のキーを内部に持つオブジェクトが入ります(キーは全てオプションとして設定できます)。
max_children
このノード型が直下に持つことができる子ノードの最大数。無制限にするために-1
と設定しないでください。max_depth
このノード型で入れ子にできる階層の最大数。1
を設定すると子ノードは持てますが孫ノードは持てません。無制限にするために-1
と設定しないでください。valid_children
子ノードとして持つことができるノード型の一覧を、文字列型の配列にまとめたもの。無制限にするために-1
と設定しないでください。icon
文字列。アイコンへのパスもしくはクラス名が使用できる。カレントディレクトリにある画像を使いたい場合は頭に./
をつけてください。つけない場合、文字列はクラス名と見なされます。あなたのテーマのデフォルトアイコンを使用する場合は省略してください。
あらかじめ定義されている二つの型があります:
#
ツリーの最上部を表します。例えば、max_children
は最上部にあるノードの最大数を制御できます。default
既定のノードを表します - 設定は全て、特定の型を持っていない全てのノードに適用されます。
get_rules (obj)
types plugin
ノードの型設定オブジェクトを取得するために使われます。
-
obj
mixed
ルールを調べるノード
Returns
Object
get_type (obj [, rules])
types plugin
ノードの型文字列もしくは型オブジェクトを取得するために使われる
obj
mixed
ルールを調べるノード-
rules
Boolean
`true`を設定した場合、文字列ではなく設定オブジェクトが戻り値として返ります。
-
Returns
String
Object
set_type (obj, type)
types plugin
ノードの型を変更するために使われる
-
obj
mixed
変更するノード type
String
新しい型
重複検知用プラグイン
同じ階層に同一名のノードを共存しないようにさせます。
$.jstree.defaults.unique
unique plugin
重複検知用プラグインの全ての既定値を保持します。
$.jstree.defaults.unique.case_sensitive
unique plugin
重複検知で大文字と小文字を区別するかどうかを示します。既定値はfalse
。
$.jstree.defaults.unique.duplicate
unique plugin
新しいインスタンスが作成され、同じ名前が既に存在する場合にインスタンスのスコープ内で実行される。
競合する名前と競合数が二つの引数として渡されます。既定ではNew node (2)
のような結果が得られます。
行表示用プラグイン
各ノードをブロックレベルで表示します。ノードの選択が簡単になります。古いブラウザの場合、ツリーが大きいと動作が重くなるかもしれません。