您的位置：首页 > Web前端 > BootStrap

BootStrap-treeview 参考

2020-03-05 14:06 1061 查看

简要教程

bootstrap-treeview是一款效果非常酷的基于bootstrap的jQuery多级列表树插件。该jQuery插件基于Twitter Bootstrap，以简单和优雅的方式来显示一些继承树结构，如视图树、列表树等等。

插件依赖

Bootstrap v3.0.3
jQuery v2.0.3

以上两个外部依赖文件已经经过测试可以正常使用，其他版本的Bootstrap需要另行测试。该插件不支持bootstrap 2。

使用方法

首先要在页面中引入依赖文件和 bootstrap-treeview.js文件。

HTML结构

可以使用任何HTML DOM元素来作为该列表树的容器：

调用插件

该列表树插件最基本的调用方法如下：

数据结构

为了创建树的继承结构，需要为该列表树插件提供一个嵌套结构的js对象。例如：

最简单的树结构可以只有一个节点，使用一个带

text

属性的js对象来实现即可：

如果你需要自定义更多的内容，可以参考下面：

节点属性

下面的参数可用于树节点的属性定义，如节点的文本、颜色和标签等。

参数名称	参数类型	参数描述
text	String(必选项)	列表树节点上的文本，通常是节点右边的小图标。
icon	String(可选项)	列表树节点上的图标，通常是节点左边的图标。
selectedIcon	String(可选项)	当某个节点被选择后显示的图标，通常是节点左边的图标。
href	String(可选项)	结合全局enableLinks选项为列表树节点指定URL。
selectable	Boolean. Default: true	指定列表树的节点是否可选择。设置为 false 将使节点展开，并且不能被选择。
state	Object(可选项)	一个节点的初始状态。
state.checked	Boolean，默认值 false	指示一个节点是否处于checked状态，用一个checkbox图标表示。
state.disabled	Boolean，默认值 false	指示一个节点是否处于disabled状态。（不是selectable，expandable或checkable）
state.expanded	Boolean，默认值 false	指示一个节点是否处于展开状态。
state.selected	Boolean，默认值 false	指示一个节点是否可以被选择。
color	String. Optional	节点的前景色，覆盖全局的前景色选项。
backColor	String. Optional	节点的背景色，覆盖全局的背景色选项。
tags	Array of Strings. Optional	通过结合全局showTags选项来在列表树节点的右边添加额外的信息。

全局参数

参数可以定制treeview的默认外观和行为。参数使用一个对象来在插件初始化时传入：

参数名称	参数类型	默认值	描述
data	Array of Objects	无	列表树上显示的数据。
backColor	String	所有合法的颜色值，Default: inherits from Bootstrap.css。	设置所有列表树节点的背景颜色。
borderColor	String	所有合法的颜色值，Default: inherits from Bootstrap.css。	设置列表树容器的边框颜色，如果不想要边框可以设置 showBorder 属性为false。
checkedIcon	String：class名称	Bootstrap Glyphicons定义的 "glyphicon glyphicon-check"	设置处于checked状态的复选框图标。
collapseIcon	String：class名称	Bootstrap Glyphicons定义的 "glyphicon glyphicon-minus"	设置列表树可收缩节点的图标。
color	String	所有合法的颜色值，Default: inherits from Bootstrap.css。	设置列表树所有节点的前景色。
emptyIcon	String：class名称	Bootstrap Glyphicons定义的"glyphicon"。	设置列表树中没有子节点的节点的图标。
enableLinks	Boolean	false	是否使用当前节点的文本作为超链接。超链接的 href 值必须在每个节点的data结构中给出。
expandIcon	String：class名称	Bootstrap Glyphicons定义的 "glyphicon glyphicon-plus"	设置列表树可展开节点的图标。
highlightSearchResults	Boolean	true	是否高亮搜索结果。
highlightSelected	Boolean	true	当选择节点时是否高亮显示。
onhoverColor	String	所有合法的颜色值， Default: '#F5F5F5'。	设置列表树的节点在用户鼠标滑过时的背景颜色。
levels	Integer	Default: 2	设置继承树默认展开的级别。
multiSelect	Boolean	false	是否可以同时选择多个节点。
nodeIcon	String：class名称	Bootstrap Glyphicons定义的 "glyphicon glyphicon-stop"	设置所有列表树节点上的默认图标。
selectedIcon	String：class名称	Bootstrap Glyphicons定义的 "glyphicon glyphicon-stop"	设置所有被选择的节点上的默认图标。
searchResultBackColor	String	所有合法的颜色值， Default: undefined, inherits。	设置搜索结果节点的背景颜色。
searchResultColor	String	所有合法的颜色值， Default: '#D9534F'	设置搜索结果节点的前景颜色。
selectedBackColor	String	所有合法的颜色值， Default: '#428bca'	设置被选择节点的背景颜色。
selectedColor	String	所有合法的颜色值， Default: '#FFFFFF'。	设置列表树选择节点的背景颜色。
showBorder	Boolean	true	是否在节点上显示边框。
showCheckbox	Boolean	false	是否在节点上显示checkboxes。
showIcon	Boolean	true	是否显示节点图标。
showTags	Boolean	false	是否在每个节点右边显示tags标签。tag值必须在每个列表树的data结构中给出。
uncheckedIcon	String：class名称	Bootstrap Glyphicons定义的 "glyphicon glyphicon-unchecked"	设置图标为未选择状态的checkbox图标。

可用方法

你可以通过两种方式来调用方法：

1、插件包装器：插件的包装器可以作为访问底层方法的代理。

多个参数必须使用数组对象来传入。
2、直接使用treeview：你可以通过下面两种方法中的一种来获取treeview对象实例。

treeview方法列表

```
checkAll(options)
```
：选择所有的节点。

触发
```
nodeChecked
```
事件，传入
```
silent
```
来阻止其它事件。
```
checkNode(node | nodeId, options)
```
：选择指定的节点，接收节点或节点ID。

触发
```
nodeChecked
```
事件，传入
```
silent
```
来阻止其它事件。
```
clearSearch()
```
：清空以前的搜索结果。例如清除它们的高亮状态。

触发
```
searchCleared
```
事件。
```
collapseAll(options)
```
：折叠所有的节点，折叠整个树。

触发
```
nodeCollapsed
```
事件，传入
```
silent
```
来阻止其它事件。
```
collapseNode(node | nodeId, options)
```
：折叠指定节点和它的子节点。如果不想折叠子节点，可以设置
```
{ ignoreChildren: true }
```
。

触发
```
nodeCollapsed
```
事件，传入
```
silent
```
来阻止其它事件。
```
disableAll(options)
```
：禁用所有的节点。

触发
```
nodeDisabled
```
事件，传入
```
silent
```
来阻止其它事件。
```
disableNode(node | nodeId, options)
```
：禁用指定的节点，接收节点或节点ID。

触发
```
nodeDisabled
```
事件，传入
```
silent
```
来阻止其它事件。
```
enableAll(options)
```
：启用所有的节点。

触发
```
nodeEnabled
```
事件，传入
```
silent
```
来阻止其它事件。
```
enableNode(node | nodeId, options)
```
：启用指定的节点，接收节点或节点ID。

触发
```
nodeEnabled
```
事件，传入
```
silent
```
来阻止其它事件。
```
expandAll(options)
```
：展开所有的树节点。也可以展开任何给定级别的树节点。

触发
```
nodeExpanded
```
事件，传入
```
silent
```
来阻止其它事件。
```
expandNode(node | nodeId, options)
```
：展开指定的树节点，接收节点或节点ID。也可以展开任何给定级别的树节点。

触发
```
nodeExpanded
```
事件，传入
```
silent
```
来阻止其它事件。
```
getCollapsed()
```
：返回折叠节点的数组。例如
```
state.expanded = false
```
。
```
getDisabled()
```
：返回被禁用节点的数组。
```
getEnabled()
```
：返回可用节点的数组。
```
getExpanded()
```
：返回所有展开节点的数组。
```
getNode(nodeId)
```
：返回给定节点ID的单一节点对象。
```
getParent(node | nodeId)
```
：返回给定节点的父节点，如果没有则返回undefined。
```
getSelected()
```
：返回所有被选择节点的数组，例如：
```
state.selected = true
```
。
```
getSiblings(node | nodeId)
```
：返回给定节点的兄弟节点的数组，如果没有则返回undefined。
```
getUnselected()
```
：返回没有被选择节点的数组。例如：
```
state.selected = false
```
。
```
remove()
```
：移除列表树容器。移除附加的事件、附加对象和额外的html元素。
```
revealNode(node | nodeId, options)
```
：显示一个树节点，展开从这个节点开始到根节点的所有节点。

触发
```
nodeExpanded
```
事件，传入
```
silent
```
来阻止其它事件。
```
search(pattern, options)
```
：搜索匹配是非常的指定树节点，并高亮它们。返回配平节点的数组。

触发
```
searchComplete
```
事件。
```
selectNode(node | nodeId, options)
```
：选择一个给定的树节点，接收节点或节点ID。

触发
```
nodeSelected
```
事件，传入
```
silent
```
来阻止其它事件。
```
toggleNodeChecked(node | nodeId, options)
```
：切换节点的Check状态。

触发
```
nodeChecked
```
事件或
```
nodeUnchecked
```
事件，传入
```
silent
```
来阻止其它事件。
```
toggleNodeDisabled(node | nodeId, options)
```
：切换一个节点的可用和不可用状态。

触发
```
nodeDisabled
```
事件或
```
nodeEnabled
```
事件，传入
```
silent
```
来阻止其它事件。
```
toggleNodeExpanded(node | nodeId, options)
```
：切换一个节点的展开和折叠状态。

触发
```
nodeExpanded
```
事件或
```
nodeCollapsed
```
事件，传入
```
silent
```
来阻止其它事件。
```
toggleNodeSelected(node | nodeId, options)
```
：切换一个节点的选择状态。

触发
```
nodeSelected
```
事件或
```
nodeUnselected
```
事件，传入
```
silent
```
来阻止其它事件。
```
uncheckAll(options)
```
：Uncheck所有的节点。

触发
```
nodeUnchecked
```
事件，传入
```
silent
```
来阻止其它事件。
```
uncheckNode(node | nodeId, options)
```
：Uncheck一个给定的节点，接收节点或节点ID。

触发
```
nodeUnchecked
```
事件，传入
```
silent
```
来阻止其它事件。
```
unselectNode(node | nodeId, options)
```
：不选择指定的节点，接收节点或节点ID。

触发
```
nodeUnselected
```
事件，传入
```
silent
```
来阻止其它事件。