TreeListウィジェット

0.20.0版から

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

Options
Methods
Events

オプション

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"`
`checkbox`	(optional) If set, displays a checkbox next to the item.
`radio`	(optional) since 2.1 If set, and `checkbox` not set, displays a radio box next to the item. The value should be a string used to group the radio buttons.
`selected`	(オプション) 設定されている場合、項目の横にチェックボックスを表示します。その状態はこのプロパティのブール値が設定されます。
`children`	(オプション) この項目の子要素を特定します。子要素がすぐに分かる場合、配列として提供され、そうでない場合、非同期に子要素を取得できる関数として提供されます。詳細は以下を参照してください。
`expanded`	(オプション) この項目が子要素を持つ場合、子要素を表示するかどうかを設定します
`deferBuild`	(optional) Delay building any UI elements for the item’s children until it is expanded for the first time. This can have a significant performance benefit for large data sets.
`element`	(optional) Custom DOM element to be used in place of the node’s label. This is ignored if `label` is set.

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

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

After the item has been added to the treeList, it is augmented with some additional properties and functions:

Property	Description
`item.parent`	The parent item in the tree
`item.depth`	The depth in the tree, with `0` being the root of the tree
`item.treeList.container`	The DOM element containing the item
`item.treeList.label`	The DOM element containing the label

Function	Description
`item.treeList.remove(detach)`	Remove the item from the tree. Set `detach` to `true` to preserve any event handlers on the item - required if the item is going to be readded elsewhere.
`item.treeList.makeLeaf(detachChildElements)`	Turns an element with children into a leaf node, removing the UI decoration. Set `detachChildElements` to `true` to preserve any child element event handlers.
`item.treeList.makeParent(children)`	Make the item a parent item, adding the child items
`item.treeList.insertChildAt(item, pos, select)`	Adds a new item at the desired position, optionally selecting it after doing so
`item.treeList.addChild(item, select)`	Appends a child item, optionally selecting it after doing so
`item.treeList.expand(done)`	Expand the item to show child items, with optional `done` callback that is called when complete
`item.treeList.collapse()`	Collapse the item to hide its children
`item.treeList.sortChildren(sortFunction)`	Sort the item’s children using the provided sort function. The sort function should match the compareFunction used with `Array.sort()`
`item.treeList.replaceElement(element)`	Replace the item’s custom DOM element

メソッド

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) { });