官方文档URL: https://www.npmjs.com/package/bootstrap-treeview
2017年11月21日10:45:10
演示:http://www.htmleaf.com/Demo/201502141380.html
下载:http://www.htmleaf.com/jQuery/Menu-Navigation/201502141379.html
github: https://github.com/jonmiles/bootstrap-treeview 英文原版在下面
依赖
如果提供这些是实际版本bootstrap-treeview已经过测试
- Bootstrap v3.3.4 (>= 3.0.0)
- jQuery v2.1.3 (>= 1.9.0)
开始
安装
您可以使用bower安装(推荐):
$ bower install bootstrap-treeview
或者使用 npm:(cnpm吧,你懂的)
$ npm install bootstrap-treeview
获取去官网直接下载
用法
为bootstrap-treeview添加以下资源以正确运行
<!-- Required Stylesheets -->
<link href="bootstrap.css" rel="stylesheet">
<!-- Required Javascript -->
<script src="jquery.js"></script>
<script src="bootstrap-treeview.js"></script>
该组件将绑定到任何现有的DOM元素
<div id="tree"></div>
基本用法可能看起来像这样
function getTree() {
// Some logic to retrieve, or generate tree structure
return data;
}
$(\'#tree\').treeview({data: getTree()});
数据结构
为了定义树所需的层次结构,有必要提供一个JavaScript对象的嵌套数组
例
var tree = [
{
text: "Parent 1",
nodes: [
{
text: "Child 1",
nodes: [
{
text: "Grandchild 1"
},
{
text: "Grandchild 2"
}
]
},
{
text: "Child 2"
}
]
},
{
text: "Parent 2"
},
{
text: "Parent 3"
},
{
text: "Parent 4"
},
{
text: "Parent 5"
}
];
在最底层,一个树节点被表示为一个简单的JavaScript对象。 这个必需的属性文本将建立一棵树
{
text: "Node 1"
}
如果你想做更多,这里是完整的节点规范
{
text: "Node 1",
icon: "glyphicon glyphicon-stop",
selectedIcon: "glyphicon glyphicon-stop",
color: "#000000",
backColor: "#FFFFFF",
href: "#node-1",
selectable: true,
state: {
checked: true,
disabled: true,
expanded: true,
selected: true
},
tags: [\'available\'],
nodes: [
{},
...
]
}
//如果你数组里有其他数据,也可以直接加入里面比如
权限节点ID:XXX,
权限节点URL:URL
节点属性
定义以下属性以允许节点级别覆盖,如节点特定的图标,颜色和标记
text
String
Mandatory 字符串 必需
显示给定树节点的文本值,通常位于节点图标的右侧
icon
String
Optional 字符串 可选
显示在给定节点上的图标,通常位于文本的左侧。
为简单起见,我们直接利用Bootstraps Glyphicons支持,因此您应该提供由空格分隔的基类和个别图标类。
通过提供基类,您可以完全控制所使用的图标。 如果你想使用自己的,那么只需将您的类添加到此图标字段
selectedIcon
String
Optional 字符串 可选
选定时显示在给定节点上的图标,通常位于文本的左侧
color
String
Optional 字符串 可选
在给定节点上使用的前景颜色将覆盖全局颜色选项
backColor
String
Optional 字符串 可选
给定节点上使用的背景颜色将覆盖全局颜色选项
href
String
Optional 字符串 可选
与全局enableLinks选项一起使用,以指定给定节点上的锚点标记URL
selectable
布尔值 默认值:true
是否可以在树中选择一个节点。 False表示节点应作为扩展标题,不会触发选择事件
state
Object
Optional 字符串 可选
描述节点的初始状态
state.checked
布尔值 默认值:false
是否选中一个节点,用复选框风格的图标表示
state.disabled
布尔值 默认值:false
是否禁用节点(不可选择,可扩展或可选)
state.expanded
布尔值 默认值:false
是否展开节点,即打开。 优先于全局选项水平
state.selected
布尔值 默认值:false
是否选择一个节点
tags
字符串数组 可选
与全局showTags选项一起使用可将附加信息添加到每个节点的右侧; 使用Bootstrap Badges
Extendible
您可以通过添加应用程序所需的任意数量的附加键值对来扩展节点对象。 请记住,这是在选择事件期间将被传递的对象
Options
选项允许您自定义树视图的默认外观和行为。 它们在初始化时作为对象传递给插件
//例子:初始化树视图
/ /扩大到5级
//背景颜色为绿色
$(\'#tree\').treeview({
data: data, // data is not optional
levels: 5,
backColor: \'green\'
});
您可以随时将新的选项对象传递给树视图,但是这将会重新初始化树视图
List of Options
以下是所有可用选项的列表
data
对象数组。 没有默认,期望数据
这是树视图显示的核心数据。
backColor
字符串,任何合法的颜色值。 默认值:从Bootstrap.css继承。
设置所有节点使用的默认背景色,除了在数据中以每个节点为基础重写时
borderColor
字符串,任何合法的颜色值。 默认值:从Bootstrap.css继承。
设置组件的边框颜色; 设置showBorder为false,如果你不想要一个可见的边框
checkedIcon
字符串,类名。 默认:由Bootstrap Glyphicons定义的“glyphicon glyphicon-check”
将图标设置为复选框,与showCheckbox一起使用
collapseIcon
字符串,类名称。 默认:Bootstrap Glyphicons定义的“glyphicon glyphicon-minus”
设置要在可折叠树节点上使用的图标
color
字符串,任何合法的颜色值。 默认值:从Bootstrap.css继承。
设置所有节点使用的默认前景色,除了在数据中以每个节点为基础重写时
emptyIcon
字符串,类名称。 默认:Bootstrap Glyphicons定义的“glyphicon”
设置要在没有子节点的树节点上使用的图标
enableLinks
布尔。 默认:false
是否将节点文本显示为超链接。 其数据结构中的href值必须在每个节点的基础上提供。
expandIcon
字符串,类名称。 默认:Bootstrap Glyphicons定义的“glyphicon glyphicon-plus”
设置要在可展开树节点上使用的图标
highlightSearchResults
布尔。 默认值:true
是否突出显示搜索结果
highlightSelected
布尔。 默认值:true
是否突出显示选定的节点
levels
整数。 默认:2
设置默认情况下树将被展开到深层的层次级别的数量
multiSelect
布尔。 默认:false
是否可以同时选择多个节点
nodeIcon
字符串,类名称。 默认:由Bootstrap Glyphicons定义的“glyphicon glyphicon-stop”
设置要在所有节点上使用的默认图标,除非在数据中以每个节点为基础重写
onhoverColor
字符串,任何合法的颜色值。默认:\'#F5F5F5\'。
设置当用户光标悬停在节点上时激活的默认背景色
selectedIcon
字符串,类名称。 默认:由Bootstrap Glyphicons定义的“glyphicon glyphicon-stop”
设置要在所有选定节点上使用的默认图标,除非在数据中的每个节点基础上重写
searchResultBackColor
字符串,任何合法的颜色值。 默认值:undefined,继承。
设置选定节点的背景颜色
searchResultColor
字符串,任何合法的颜色值。 默认:\'#D9534F\'。
设置选定节点的前景色
selectedBackColor
字符串,任何合法的颜色值。 默认:\'#428bca\'。
设置选定节点的背景颜色
selectedColor
字符串,任何合法的颜色值。 默认:\'#FFFFFF\'。
设置选定节点的前景色
showBorder
布尔。 默认值:true
是否在节点周围显示边框
showCheckbox
布尔。 默认:false
是否显示节点上的复选框
showIcon
布尔。 默认值:true
是否显示节点图标
showTags
布尔。 默认:false
是否在每个节点的右侧显示标签。 其值必须在每个节点的数据结构中提供
uncheckedIcon
字符串,类名。 默认:由Bootstrap Glyphicons定义的“glyphicon glyphicon-unchecked”
将图标设置为未勾选的复选框,与showCheckbox一起使用
方法
方法提供了一种以编程方式与插件交互的方式。 例如,可以通过expandNode方法扩展一个节点。
您可以通过以下两种方式之一调用方法:
1. The plugin\'s wrapper
插件的包装器作为访问底层方法的代理
$(\'#tree\').treeview(\'methodName\', args)
限制,多个参数必须作为参数数组传递
2. The treeview directly
您可以使用以下两种方法之一获取树视图的实例
//这个特殊的方法返回树视图的一个实例
$(\'#tree\').treeview(true)
.methodName(args);
//实例也保存在DOM元素数据中,
//可以使用插件的ID“treeview”访问
$(\'#tree\').data(\'treeview\')
.methodName(args);
一个更好的方法,如果你计划了很多交互
List of Methods
以下是所有可用方法的列表
checkAll(options)
检查所有树节点
$(\'#tree\').treeview(\'checkAll\', { silent: true });
Triggers nodeChecked
event; pass silent to suppress events.
checkNode(node | nodeId, options)
检查给定的树节点,接受节点或nodeId
$(\'#tree\').treeview(\'checkNode\', [ nodeId, { silent: true } ]);
Triggers nodeChecked
event; pass silent to suppress events.
clearSearch()
清除任何先前搜索结果的树形视图,例如 删除其突出显示的状态
$(\'#tree\').treeview(\'clearSearch\');
Triggers searchCleared
event
collapseAll(options)
折叠所有树节点,折叠整个树
$(\'#tree\').treeview(\'collapseAll\', { silent: true });
Triggers nodeCollapsed
event; pass silent to suppress events.
collapseNode(node | nodeId, options)
折叠给定的树节点,它是子节点。 如果您不想折叠子节点,请传递选项 { ignoreChildren: true }
.
$(\'#tree\').treeview(\'collapseNode\', [ nodeId, { silent: true, ignoreChildren: false } ]);
Triggers nodeCollapsed
event; pass silent to suppress events.
disableAll(options)
禁用所有树节点
$(\'#tree\').treeview(\'disableAll\', { silent: true });
Triggers nodeDisabled
event; pass silent to suppress events.
disableNode(node | nodeId, options)
禁用给定的树节点,接受节点或nodeId
$(\'#tree\').treeview(\'disableNode\', [ nodeId, { silent: true } ]);
Triggers nodeDisabled
event; pass silent to suppress events.
enableAll(options)
启用所有树节点
$(\'#tree\').treeview(\'enableAll\', { silent: true });
Triggers nodeEnabled
event; pass silent to suppress events.
enableNode(node | nodeId, options)
启用给定的树节点,接受节点或nodeId
$(\'#tree\').treeview(\'enableNode\', [ nodeId, { silent: true } ]);
Triggers nodeEnabled
event; pass silent to suppress events.
expandAll(options)
展开所有树节点。 可以选择扩展到任何给定数量的级别
$(\'#tree\').treeview(\'expandAll\', { levels: 2, silent: true });
Triggers nodeExpanded
event; pass silent to suppress events.
expandNode(node | nodeId, options)
展开给定的树节点,接受节点或nodeId。 可以选择扩展到任何给定数量的级别
$(\'#tree\').treeview(\'expandNode\', [ nodeId, { levels: 2, silent: true } ]);
Triggers nodeExpanded
event; pass silent to suppress events.
getCollapsed()
返回折叠节点数组,例如 state.expanded = false
$(\'#tree\').treeview(\'getCollapsed\', nodeId);
getDisabled()
返回禁用的节点数组,例如 state.disabled = true
$(\'#tree\').treeview(\'getDisabled\', nodeId);
getEnabled()
返回已启用节点的数组,例如 state.disabled = false
$(\'#tree\').treeview(\'getEnabled\', nodeId);
getExpanded()
返回一个展开的节点数组,例如 state.expanded = true
$(\'#tree\').treeview(\'getExpanded\', nodeId);
getNode(nodeId)
返回与给定节点ID相匹配的单个节点对象.
$(\'#tree\').treeview(\'getNode\', nodeId);
getParent(node | nodeId)
返回给定节点的父节点,否则返回undefined
$(\'#tree\').treeview(\'getParent\', node);
getSelected()
返回选定节点的数组,例如 state.selected = true
$(\'#tree\').treeview(\'getSelected\', nodeId);
getSiblings(node | nodeId)
返回给定节点的兄弟节点数组,如果有效则返回undefined
$(\'#tree\').treeview(\'getSiblings\', node);
getUnselected()
返回未选定节点的数组,例如 state.selected = false
$(\'#tree\').treeview(\'getUnselected\', nodeId);
remove()
删除树视图组件。 删除附加事件,内部附加对象和添加的HTML元素
$(\'#tree\').treeview(\'remove\');
revealNode(node | nodeId, options)
显示给定的树节点,将树从节点扩展到根
$(\'#tree\').treeview(\'revealNode\', [ nodeId, { silent: true } ]);
Triggers nodeExpanded
event; pass silent to suppress events.
search(pattern, options)
在树视图中搜索与给定字符串匹配的节点,并在树中突出显示它们。
返回匹配节点的数组
$(\'#tree\').treeview(\'search\', [ \'Parent\', {
ignoreCase: true, // case insensitive
exactMatch: false, // like or equals
revealResults: true, // reveal matching nodes
}]);
Triggers searchComplete
event
selectNode(node | nodeId, options)
选择给定的树节点,接受节点或nodeId
$(\'#tree\').treeview(\'selectNode\', [ nodeId, { silent: true } ]);
Triggers nodeSelected
event; pass silent to suppress events.
toggleNodeChecked(node | nodeId, options)
切换节点检查状态; 检查是否未选中,如果选中取消选中
$(\'#tree\').treeview(\'toggleNodeChecked\', [ nodeId, { silent: true } ]);
Triggers either nodeChecked
or nodeUnchecked
event; pass silent to suppress events.
toggleNodeDisabled(node | nodeId, options)
切换节点禁用状态; 禁用如果启用,启用如果禁用
$(\'#tree\').treeview(\'toggleNodeDisabled\', [ nodeId, { silent: true } ]);
Triggers either nodeDisabled
or nodeEnabled
event; pass silent to suppress events.
toggleNodeExpanded(node | nodeId, options)
切换节点展开状态; 如果展开则折叠,如果折叠则展开
$(\'#tree\').treeview(\'toggleNodeExpanded\', [ nodeId, { silent: true } ]);
Triggers either nodeExpanded
or nodeCollapsed
event; pass silent to suppress events.
toggleNodeSelected(node | nodeId, options)
切换节点选择状态; 选择是否取消选择,取消选择
$(\'#tree\').treeview(\'toggleNodeSelected\', [ nodeId, { silent: true } ]);
Triggers either nodeSelected
or nodeUnselected
event; pass silent to suppress events.
uncheckAll(options)
取消选中所有的树节点
$(\'#tree\').treeview(\'uncheckAll\', { silent: true });
Triggers nodeUnchecked
event; pass silent to suppress events.
uncheckNode(node | nodeId, options)
取消给定的树节点,接受节点或nodeId
$(\'#tree\').treeview(\'uncheckNode\', [ nodeId, { silent: true } ]);
Triggers nodeUnchecked
event; pass silent to suppress events.
unselectNode(node | nodeId, options)
取消选择给定的树节点,接受节点或nodeId
$(\'#tree\').treeview(\'unselectNode\', [ nodeId, { silent: true } ]);
Triggers nodeUnselected
event; pass silent to suppress events.
Events 事件
提供事件以便您的应用程序可以响应树视图状态中的更改。 例如,如果要在选择节点时更新显示,请使用nodeSelected事件。
您可以通过使用选项回调处理程序或标准jQuery .on方法来绑定到以下定义的任何事件。
使用选项回调处理程序的示例:
$(\'#tree\').treeview({
//回调的命名约定是用`on`预先设置的
//并大写事件名称的第一个字母
//例如 nodeSelected - > onNodeSelected
onNodeSelected: function(event, data) {
// Your logic goes here
});
并使用jQuery .on方法
$(\'#tree\').on(\'nodeSelected\', function(event, data) {
// Your logic goes here
});
List of Events
nodeChecked (event, node)
- 节点被选中
nodeCollapsed (event, node)
- 节点已折叠
nodeDisabled (event, node)
-一个节点被禁用
nodeEnabled (event, node)
- 节点已启用
nodeExpanded (event, node)
- 节点被展开
nodeSelected (event, node)
- 节点被选中
nodeUnchecked (event, node)
- 一个节点没有被选中
nodeUnselected (event, node)
- 节点未被选中
searchComplete (event, results)
- 搜索完成后
searchCleared (event, results)
- 搜索结果被清除后
================================================================================================================
一点个人经验: