TreeListウィジェット

0.20.0版から

ツリー構造のデータを表示するためのリストです。これは0.20.0版で追加され、非常に最小限の機能を持っています。

オプション

data

メソッド

data
empty
show

オプション

data

型: Array

ツリーリストの初期データです。

このツリーは項目の配列として表示されます。 これらはツリー構造内で最上位項目となります。 各項目はchildrenプロパティを持ち、項目の子要素を識別しています。

[
    {
        label: 'Local',
        icon: 'fa fa-rocket',
        children: [
            { label: "child 1"},
            { label: "child 2"}
        ]
    }
]

各項目は以下のプロパティを持つことができます。:

プロパティ 説明
label 項目のラベル
id (オプション) 項目のユニークな識別子
class (オプション) 項目に適用するCSSのクラス
icon (オプション) アイコンとして適用するCSSのクラス、例としては"fa fa-rocket"
selected (オプション) 設定されている場合、項目の横にチェックボックスを表示します。その状態はこのプロパティのブール値が設定されます。
children (オプション) この項目の子要素を特定します。子要素がすぐに分かる場合、配列として提供され、そうでない場合、非同期に子要素を取得できる関数として提供されます。詳細は以下を参照してください。
expanded (オプション) この項目が子要素を持つ場合、子要素を表示するかどうかを設定します

childrenプロパティが関数として提供された場合、 この関数はコールバック関数の唯一の引数を受け取る必要があります。 このコールバック関数は子要素の配列によって呼び出される必要があります。 これにより、HTTPリクエストなどを利用して項目を非同期的に取得することができます。

children: function(done) {
    $.getJSON('/some/url', function(result) {
        done(result);
    })
}

メソッド

data()

表示しているツリーリストのデータを返します。

項目にselectedプロパティが設定されている場合、 その値は現在のチェックボックスの状態を反映します。

data( items )

リストに表示するデータを設定します。

item引数の詳細についてはdataオプションを参照してください。

$(".input").treeList('data',[{label:"Colours"}]);

empty()

リストからすべての項目を削除します。

$(".input").treeList('empty');

show( itemId )

リストに項目が表示されるようにします。 引数itemIdはリスト内の項目のidプロパティと対応しなければなりません。

Note: 現在、これはリスト内の最上位の項目だけに作用します。 ツリーのトップレベル以下の項目を表示するために利用することはできません。

$(".input").treeList('show','my-red-item');

イベント

treelistselect( event, item )

項目がクリックされたとき、呼び出されます。 項目がselectedプロパティがもともと設定されていた場合、その値は項目のチェックボックスの状態を反映するように更新されます。

$(".input").on('treelistselect', function(event, item) {
    if (item.selected) {
        // The checkbox is checked
    } else {
        // The checkbox is not checked
    }
} );

treelistmouseout( event, item )

マウスが項目外に移動したとき、呼び出されます。

$(".input").on('treelistmouseout', function(event, item) { });

treelistmouseover( event, item )

マウスが項目の上に移動したとき、呼び出されます。

$(".input").on('treelistmouseover', function(event, item) { });