TreeList 组件

自 0.20.0 起

用于显示树状数据的列表。此功能于 0.20.0 版本中添加，功能相对基础。

选项
方法
事件

选项

data

类型：数组

treelist 的初始数据。

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

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

每个项可以有以下属性

属性	描述
`label`	项的标签。
`id`	（可选）项的唯一标识符
`class`	（可选）应用于项的 CSS 类
`icon`	（可选）用作图标的 CSS 类，例如 `"fa fa-rocket"`。
`checkbox`	（可选）如果设置，在项旁边显示一个复选框。
`radio`	（可选）自 2.1 起如果设置，并且 `checkbox` 未设置，在项旁边显示一个单选框。该值应为用于分组单选按钮的字符串。
`selected`	（可选）设置项的初始选中状态。
`children`	（可选）标识此项的子项。如果子项立即可知，可以提供为数组，或者作为函数以异步方式获取子项。详情见下文。
`expanded`	（可选）如果项有子项，设置是否显示子项
`deferBuild`	（可选）延迟构建项子项的任何 UI 元素，直到首次展开。这对于大型数据集可以显著提高性能。
`element`	（可选）用于替代节点标签的自定义 DOM 元素。如果设置了 `label`，则忽略此项。

如果 children 属性作为函数提供，该函数应接受一个回调函数作为唯一参数。该回调函数应与子项数组一起被调用。这允许异步检索项，例如通过 HTTP 请求。

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

将项添加到 treeList 后，它会附带一些附加属性和函数

属性	描述
`item.parent`	树中的父项
`item.depth`	树中的深度，`0` 是树的根
`item.treeList.container`	包含项的 DOM 元素
`item.treeList.label`	包含标签的 DOM 元素

函数	描述
`item.treeList.remove(detach)`	从树中移除项。将 `detach` 设置为 `true` 以保留项上的任何事件处理程序 - 如果项将重新添加到其他位置，则需要此项。
`item.treeList.makeLeaf(detachChildElements)`	将带有子项的元素转换为叶节点，移除 UI 装饰。将 `detachChildElements` 设置为 `true` 以保留任何子元素事件处理程序。
`item.treeList.makeParent(children)`	使该项成为父项，并添加子项
`item.treeList.insertChildAt(item, pos, select)`	在所需位置添加一个新项，完成后可选地选择它
`item.treeList.addChild(item, select)`	追加一个子项，完成后可选地选择它
`item.treeList.expand(done)`	展开项以显示子项，可选的 `done` 回调在完成时调用
`item.treeList.collapse()`	折叠项以隐藏其子项
`item.treeList.sortChildren(sortFunction)`	使用提供的排序函数对项的子项进行排序。排序函数应与 `Array.sort()` 中使用的 compareFunction 匹配
`item.treeList.replaceElement(element)`	替换项的自定义 DOM 元素

方法

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