jsTreeドキュメント日本語訳
JSONを使ってツリーを埋め込む
書式
jsTreeではJSONを使って動作する際に指定された書式を守る必要があります。 この標準構文では、必須のフィールドはありません。 - 必要なものだけ設定します。あなたが独自に追加したプロパティも使用できることを覚えておいてください。 - jsTree はそういった独自に追加されたプロパティには一切触れず、あなたはいつでもそれらを使用することができます。
ノードアイコンを変更するには icon
プロパティを使います。 /
を含んだ文字列を設定することで、ノードアイコンとして画像を表示できます。
アイコンを表す別の文字列を、クラスとして<i>
エレメントに適用することもできます。
boolean型のfalse
を設定してノードにアイコンを表示しないようにすることもできます。
stateプロパティを使ってノードの状態を設定できます。stateプロパティには以下の設定を組み合わせて使えます。: opened
, selected
, disabled
.
li_attr
プロパティ と a_attr
プロパティは共に、jQueryのattr関数へ直接渡されます。
AJAXを使ってchildren
に boolean型の true
を設定すると、jsTreeはそのノードを閉じている状態で描写し、ユーザーがノードをクリックした時に追加でAJAXリクエストを作成します。
入れ子になっている子要素は、親と同じ形式かプレーンな文字列でなければなりません。 (ノードのテキストに文字列が使用された場合、他の部分は全て自動的に作成されます)。
// Expected format of the node (there are no required fields)
{
id : "string" // will be autogenerated if omitted
text : "string" // node text
icon : "string" // string for custom
state : {
opened : boolean // is the node open
disabled : boolean // is the node disabled
selected : boolean // is the node selected
},
children : [] // array of strings or objects
li_attr : {} // attributes for the generated LI node
a_attr : {} // attributes for the generated A node
}
もう一つの JSON 形式
children
プロパティの入れ子方式を使いたくない場合は、ノードが二つの必須フィールドを持つ、もう一つの構文を使うことができます
:この方式では id
プロパティと parent
プロパティがあり、children
プロパティがありません (他の部分は全て同じです)。
jsTreeが自動的に親子関係を構築します。そのノードが最上位のノードであることを示すためには、parent
プロパティに"#"
を設定します。
この方式は一度でツリー全体を描写する際に使うべきであり、データが隣接関係を使ったデータベースに格納されている時に便利です。
// Alternative format of the node (id & parent are required)
{
id : "string" // required
parent : "string" // required
text : "string" // node text
icon : "string" // string for custom
state : {
opened : boolean // is the node open
disabled : boolean // is the node disabled
selected : boolean // is the node selected
},
li_attr : {} // attributes for the generated LI node
a_attr : {} // attributes for the generated A node
}
JSONを使用する
JSON オブジェクトをツリー構造に埋め込むには、$.jstree.defaults.core.data
コンフィグオプションを使う必要があります。
想定されている形式は、上記で説明したオブジェクトの配列もしくは単純な文字列です(ノードのテキストに文字列が使用された場合、他の部分は全て自動的に作成されます)。子ノードは、親ノードのchildren
プロパティと同じ形式で作成されます。
$('#using_json').jstree({ 'core' : {
'data' : [
'Simple root node',
{
'text' : 'Root node 2',
'state' : {
'opened' : true,
'selected' : true
},
'children' : [
{ 'text' : 'Child 1' },
'Child 2'
]
}
]
} });
もう一つの JSON形式を使用する
$('#using_json_2').jstree({ 'core' : {
'data' : [
{ "id" : "ajson1", "parent" : "#", "text" : "Simple root node" },
{ "id" : "ajson2", "parent" : "#", "text" : "Root node 2" },
{ "id" : "ajson3", "parent" : "ajson2", "text" : "Child 1" },
{ "id" : "ajson4", "parent" : "ajson2", "text" : "Child 2" },
]
} });
AJAXを使用する
AJAXを使ってサーバから送られてくるツリー構造の中にJSONを埋め込むこともできます。 形式は上記で説明したものと同じもので、JSONはコンフィグオブジェクト内にはなく、サーバから返されてくるというのが唯一の違いです。
このオプションを使用するには、$.jstree.defaults.core.data
コンフィグオプションを使う必要があります。
標準のjQuery AJAX 設定とjstreeを使うだけで、AJAXで送ったリクエストがツリー構造となってサーバから自動で返ってきます。
標準のjQuery ajax オプションに加え、 data
とurl
を使用するための関数を設定できます。
この機能はカレントインスタンスのスコープ内で実行され、読み込まれたノードを示すパラメータが設定されます。
これらの機能によって取得できる値はそれぞれURLやデータとして使用できます。
サーバから正しいjsonヘッダが返ってこない場合は、少なくとも"json"
にdataType
jQuery AJAX オプションを設定するようにしてください。
$('#tree').jstree({
'core' : {
'data' : {
'url' : function (node) {
return node.id === '#' ?
'ajax_roots.json' :
'ajax_children.json';
},
'data' : function (node) {
return { 'id' : node.id };
}
}
});
関数を使用する
関数も使用することができます。この関数では二つの引数を受け取ります。 - 二つの引数というのは、読み込まれたノードとコールバック関数( to call with the children for that node once you are ready.)です。
$('#tree').jstree({
'core' : {
'data' : function (obj, cb) {
cb.call(this,
['Root 1', 'Root 2']);
}
}});