TreeList 小部件

自 0.20.0 以来

用于显示树状结构数据的列表。它在 0.20.0 中增加，功能相当简单。

选项
方法
事件

选项

data

类型: 数组

树列表的初始数据。

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

[
    {
        label: '本地',
        icon: 'fa fa-rocket',
        children: [
            { label: "子项 1"},
            { label: "子项 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()

返回树列表正在显示的数据。

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

data( items )

设置将由列表显示的数据。

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

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

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) {
        // 复选框被选中
    } else {
        // 复选框未被选中
    }
} );

treelistmouseout( event, item )

当鼠标移出项时触发。

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

treelistmouseover( event, item )

当鼠标移到项上时触发。

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