树形列表组件

自 0.20.0 版本起

用于显示树形结构数据的列表。该功能在0.20.0版本中添加，目前功能较为基础。

选项
方法
事件

选项

data

类型：数组

树形列表的初始数据。

树结构表示为一个项目数组。这些是树结构中最顶层的项目。每个项目可能有一个children属性，用于标识该项目的子项。

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

每个项目可以包含以下属性：

属性	描述
`label`	The label for the item.
`id`	(optional) A unique identifier for the item
`class`	(optional) A css class to apply to the item
`icon`	(optional) A css class to apply as the icon, for example `"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`	(optional) Sets the initial selected state of the item.
`children`	(optional) Identifies the child items of this one. Can be provided as an array if the children are immediately known, or as a function to get the children asynchronously. See below for details.
`expanded`	(optional) If the item has children, set whether to display the children
`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);
    })
}

当项目被添加到树状列表后，会为其添加一些额外的属性和功能：

属性	描述
`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

功能	描述
`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()

返回treeList正在显示的数据。

如果任何项目设置了selected属性，其值将反映当前复选框的状态。

data( items )

设置要在列表中显示的数据。

有关items参数的详细信息，请参阅data选项。

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

empty()

从列表中移除所有项目。

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

show( itemId )

确保列表中的某个项目可见。参数itemId必须与列表中项目的id属性相对应。

注意：当前仅适用于列表中的顶层项。无法用于显示树结构中顶层以下的项。

$(".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) { });