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

插件依赖
- Bootstrap v3.0.3
- jQuery v2.0.3
以上两个外部依赖文件已经经过测试可以正常使用,其他版本的Bootstrap需要另行测试。该插件不支持bootstrap 2。
使用方法
首先要在页面中引入依赖文件和 bootstrap-treeview.js文件。
<!-- Required Stylesheets --><link href="./css/bootstrap.css" rel="stylesheet"><!-- Required Javascript --><script src="./js/jquery.js"></script><script src="./js/bootstrap-treeview.js"></script> |
HTML结构
可以使用任何HTML DOM元素来作为该列表树的容器:
<div id="tree"></div> |
调用插件
该列表树插件最基本的调用方法如下:
function getTree() { // Some logic to retrieve, or generate tree structure return data;}$('#tree').treeview({data: getTree()}); |
数据结构
为了创建树的继承结构,需要为该列表树插件提供一个嵌套结构的js对象。例如:
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" }]; |
最简单的树结构可以只有一个节点,使用一个带text属性的js对象来实现即可:
{ 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: [ {}, ... ]} |
节点属性
下面的参数可用于树节点的属性定义,如节点的文本、颜色和标签等。
| 参数名称 | 参数类型 | 参数描述 |
| 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的默认外观和行为。参数使用一个对象来在插件初始化时传入:
// Example: initializing the treeview// expanded to 5 levels// with a background color of green$('#tree').treeview({ data: data, // data is not optional levels: 5, backColor: 'green'}); |
| 参数名称 | 参数类型 | 默认值 | 描述 |
| 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、插件包装器:插件的包装器可以作为访问底层方法的代理。
$('#tree').treeview('methodName', args)多个参数必须使用数组对象来传入。
- 2、直接使用treeview:你可以通过下面两种方法中的一种来获取treeview对象实例。
//该方法返回一个treeview的对象实例$('#tree').treeview(true).methodName(args);//对象实例也保存在DOM元素的data中,//可以使用'treeview'的id来访问它。$('#tree').data('treeview').methodName(args);
treeview方法列表
checkAll(options):选择所有的节点。$('#tree').treeview('checkAll', { silent:true});触发
nodeChecked事件,传入silent来阻止其它事件。checkNode(node | nodeId, options):选择指定的节点,接收节点或节点ID。$('#tree').treeview('checkNode', [ nodeId, { silent:true} ]);触发
nodeChecked事件,传入silent来阻止其它事件。clearSearch():清空以前的搜索结果。例如清除它们的高亮状态。$('#tree').treeview('clearSearch');触发
searchCleared事件。collapseAll(options):折叠所有的节点,折叠整个树。$('#tree').treeview('collapseAll', { silent:true});触发
nodeCollapsed事件,传入silent来阻止其它事件。collapseNode(node | nodeId, options):折叠指定节点和它的子节点。如果不想折叠子节点,可以设置{ ignoreChildren: true }。$('#tree').treeview('collapseNode', [ nodeId, { silent:true, ignoreChildren:false} ]);触发
nodeCollapsed事件,传入silent来阻止其它事件。disableAll(options):禁用所有的节点。$('#tree').treeview('disableAll', { silent:true});触发
nodeDisabled事件,传入silent来阻止其它事件。disableNode(node | nodeId, options):禁用指定的节点,接收节点或节点ID。$('#tree').treeview('disableNode', [ nodeId, { silent:true} ]);触发
nodeDisabled事件,传入silent来阻止其它事件。enableAll(options):启用所有的节点。$('#tree').treeview('enableAll', { silent:true});触发
nodeEnabled事件,传入silent来阻止其它事件。enableNode(node | nodeId, options):启用指定的节点,接收节点或节点ID。$('#tree').treeview('enableNode', [ nodeId, { silent:true} ]);触发
nodeEnabled事件,传入silent来阻止其它事件。expandAll(options):展开所有的树节点。也可以展开任何给定级别的树节点。$('#tree').treeview('expandAll', { levels: 2, silent:true});触发
nodeExpanded事件,传入silent来阻止其它事件。expandNode(node | nodeId, options):展开指定的树节点,接收节点或节点ID。也可以展开任何给定级别的树节点。$('#tree').treeview('expandNode', [ nodeId, { levels: 2, silent:true} ]);触发
nodeExpanded事件,传入silent来阻止其它事件。getCollapsed():返回折叠节点的数组。例如state.expanded = false。$('#tree').treeview('getCollapsed', nodeId);getDisabled():返回被禁用节点的数组。$('#tree').treeview('getDisabled', nodeId);getEnabled():返回可用节点的数组。$('#tree').treeview('getEnabled', nodeId);getExpanded():返回所有展开节点的数组。$('#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} ]);触发
nodeExpanded事件,传入silent来阻止其它事件。search(pattern, options):搜索匹配是非常的指定树节点,并高亮它们。返回配平节点的数组。$('#tree').treeview('search', ['Parent', {ignoreCase:true,// case insensitiveexactMatch:false,// like or equalsrevealResults:true,// reveal matching nodes}]);触发
searchComplete事件。selectNode(node | nodeId, options):选择一个给定的树节点,接收节点或节点ID。$('#tree').treeview('selectNode', [ nodeId, { silent:true} ]);触发
nodeSelected事件,传入silent来阻止其它事件。toggleNodeChecked(node | nodeId, options):切换节点的Check状态。$('#tree').treeview('toggleNodeChecked', [ nodeId, { silent:true} ]);触发
nodeChecked事件或nodeUnchecked事件,传入silent来阻止其它事件。toggleNodeDisabled(node | nodeId, options):切换一个节点的可用和不可用状态。$('#tree').treeview('toggleNodeDisabled', [ nodeId, { silent:true} ]);触发
nodeDisabled事件或nodeEnabled事件,传入silent来阻止其它事件。toggleNodeExpanded(node | nodeId, options):切换一个节点的展开和折叠状态。$('#tree').treeview('toggleNodeExpanded', [ nodeId, { silent:true} ]);触发
nodeExpanded事件或nodeCollapsed事件,传入silent来阻止其它事件。toggleNodeSelected(node | nodeId, options):切换一个节点的选择状态。$('#tree').treeview('toggleNodeSelected', [ nodeId, { silent:true} ]);触发
nodeSelected事件或nodeUnselected事件,传入silent来阻止其它事件。uncheckAll(options):Uncheck所有的节点。$('#tree').treeview('uncheckAll', { silent:true});触发
nodeUnchecked事件,传入silent来阻止其它事件。uncheckNode(node | nodeId, options):Uncheck一个给定的节点,接收节点或节点ID。$('#tree').treeview('uncheckNode', [ nodeId, { silent:true} ]);触发
nodeUnchecked事件,传入silent来阻止其它事件。unselectNode(node | nodeId, options):不选择指定的节点,接收节点或节点ID。$('#tree').treeview('unselectNode', [ nodeId, { silent:true} ]);触发
nodeUnselected事件,传入silent来阻止其它事件。
事件
你可以在参数中使用回调函数来绑定任何事件,或者使用标准的jQuery .on()方法来绑定事件。
在参数中调用的示例:
$('#tree').treeview({ // The naming convention for callback's is to prepend with `on` // and capitalize the first letter of the event name // e.g. nodeSelected -> onNodeSelected onNodeSelected: function(event, data) { // 事件代码...}); |
使用jQuery .on方法:
$('#tree').on('nodeSelected', function(event, data) { // 事件代码...}); |
可用事件列表
nodeChecked (event, node):一个节点被checked。nodeCollapsed (event, node):一个节点被折叠。nodeDisabled (event, node):一个节点被禁用。nodeEnabled (event, node):一个节点被启用。nodeExpanded (event, node):一个节点被展开。nodeSelected (event, node):一个节点被选择。nodeUnchecked (event, node):一个节点被unchecked。nodeUnselected (event, node):取消选择一个节点。searchComplete (event, results):搜索完成之后触发。searchCleared (event, results):搜索结果被清除之后触发。
BootStrap-treeview 参考的更多相关文章
- Bootstrap treeview增加或者删除节点
参考(AddNode: http://blog.csdn.net/qq_25628235/article/details/51719917,deleteNode:http://blog.csdn.ne ...
- Bootstrap中文参考手册
Bootstrap是推出的一个开源的用于前端开发的工具包.它由Twitter的设计师Mark Otto和Jacob Thornton合作开发,是一个CSS/HTML框架.Bootstrap提供了优雅的 ...
- 初始化bootstrap treeview树节点
最近在做启明星图库时,使用了Jquery Bootstrap Treeview插件.但是,遇到了一个初始化的问题.先看效果如下: 当用户打开图库时,左边分类第一个类别是“所有分类”,默认需要选中. ...
- BootStrap TreeView使用示例
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- bootstrap treeview 树形数据生成
这个问题还是挺经典的,后台只是负责查出所有的数据,前台js来处理数据展示给treeview;show you the code below:<script> $(function () { ...
- bootstrap treeview实现菜单树
本博客,介绍通过Bootstrap的treeview插件实现菜单树的功能. treeview链接:http://www.htmleaf.com/Demo/201502141380.html ORM框架 ...
- bootstrap学习参考网站
----https://www. evget .com /article /
- ASP.NET MVC使用Bootstrap系列(5)——创建ASP.NET MVC Bootstrap Helpers
阅读目录 序言 内置的HTML Helpers 创建自定义的Helpers 使用静态方法创建Helpers 使用扩展方法创建Helpers 创建Fluent Helpers 创建自动闭合的Helper ...
- MVC Bootstrap Helpers
ASP.NET MVC Bootstrap Helpers 阅读目录 序言 内置的HTML Helpers 创建自定义的Helpers 使用静态方法创建Helpers 使用扩展方法创建Helper ...
- 第一章 Bootstrap简介
一.Bootstrap简介 Bootstrap是基于 HTML.CSS.JAVASCRIPT 的前端框架,它简洁灵活,使得 Web 开发更加快捷.它由Twitter的设计师Mark Otto和Jaco ...
随机推荐
- bower私服部署
目录 bower私服部署 简介 工具清单 安装 安装nodejs 安装git 安装private-bower 配置private-bower 启动private-bower 开放端口 开机启动/注册为 ...
- IDEA设置默认WorkingDirectory
- win10 64位安装redis 及Redis Desktop Manager使用
说多无益,先把redis在win上的开发环境搭一下. redis官方没有64位的Windows下的可执行程序,目前有个开源的托管在github上, 地址:https://github.com/Serv ...
- Python继承、多继承、魔术方法
继承和多继承的概念和使用 super的用法 __str__ __repr__ __call__ 多继承方法解析顺序和Mix-in开发模式 魔术方法原理和作用 继承 定义类的时候,在类名后面的括号里填继 ...
- 运行输出时候遇到了Json.Disosi@3fa77460格式·
比如我的运行输出时候遇到了Json.Disosi@3fa77460这种类路径+@+储存空间编码格式 发现是实体类忘记加了toString方法 使用ALT+ins快捷键点击toString()方法 再运 ...
- keeplived+lvs(主从热备+负载均衡)
本次实验基于DR负载均衡模式(直接路由),设置一个VIP(Virtual IP)为192.168.1.225,用户只需要访问这个IP地址即可获得网页服务.其中,负载均衡主机为192.168.1.221 ...
- 好用的代码统计小工具SourceCounter(下载)
SourceCounter下载链接 https://pan.baidu.com/s/12Cg51L0hRn5w-m1NQJ-Xlg 提取码:i1cd 很多时候我们需要统计自己所写的代码的数量.举个栗子 ...
- [转] 构建Docker镜像两种方式的比较-Dockerfile方式和S2I方式
原文地址:https://www.cnblogs.com/tianshifu/p/8127837.html 前言 写Dockerfile是构建Docker镜像最通常的方式,接触过Docker的童鞋多少 ...
- Django2.2报错 AttributeError: 'str' object has no attribute 'decode'
准备将 Django 连接到 MySQL,在命令行输入命令 python manage.py makemigrations 后报错: AttributeError: 'str' object has ...
- 动手学深度学习17-kaggle竞赛实践小项目房价预测
kaggle竞赛 获取和读取数据集 数据预处理 找出所有数值型的特征,然后标准化 处理离散值特征 转化为DNArray后续训练 训练模型 k折交叉验证 预测样本,并提交结果 kaggle竞赛 本节将动 ...