一、bootstrap-treeview
bootstrap-treeview是一款效果非常酷的基于bootstrap的jQuery多级列表树插件。该jQuery插件基于Twitter Bootstrap,以简单和优雅的方式来显示一些继承树结构,如视图树、列表树等等。
插件依赖
- Bootstrap v3.0.3
- jQuery v2.0.3
二、使用方法
首先要在页面中引入依赖文件和 bootstrap-treeview.js文件。
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"> <script src="https://cdn.bootcss.com/jquery/2.0.3/jquery.js"></script> <script src="https://cdn.bootcss.com/bootstrap-treeview/1.2.0/bootstrap-treeview.min.js"></script>
可以使用任何HTML DOM元素来作为该列表树的容器:
<div id="treeview">
该列表树插件最基本的调用方法如下:
var defaultData = [ { text:"Parent 1", // text 定义菜单标题 nodes: [ // 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" } ]; $('#treeview').treeview({ data: defaultData, });
最简单的树结构可以只有一个节点,使用一个带text
属性的js对象来实现即可:
{ text:"Node 1" }
节点属性介绍
下面的参数可用于树节点的属性定义,如节点的文本、颜色和标签等。
参数名称 | 参数类型 | 参数描述 |
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选项来在列表树节点的右边添加额外的信息。 |
全局参数
参数名称 | 参数类型 | 默认值 | 描述 |
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图标。 |
var options = { data:defaultData , //data属性是必须的,是一个对象数组 Array of Objects. color: "", //所有节点使用的默认前景色,这个颜色会被节点数据上的backColor属性覆盖. String backColor: "#000000", //所有节点使用的默认背景色,这个颜色会被节点数据上的backColor属性覆盖. String borderColor: "#000000", //边框颜色。如果不想要可见的边框,则可以设置showBorder为false。 String nodeIcon: "glyphicon glyphicon-stop", //所有节点的默认图标 checkedIcon: "glyphicon glyphicon-check", //节点被选中时显示的图标 String collapseIcon: "glyphicon glyphicon-minus", //节点被折叠时显示的图标 String expandIcon: "glyphicon glyphicon-plus", //节点展开时显示的图标 String emptyIcon: "glyphicon", //当节点没有子节点的时候显示的图标 String enableLinks: false, //是否将节点文本呈现为超链接。前提是在每个节点基础上,必须在数据结构中提供href值。 Boolean highlightSearchResults: true, //是否高亮显示被选中的节点 Boolean levels: 2, //设置整棵树的层级数 Integer multiSelect: false, //是否可以同时选择多个节点 Boolean onhoverColor: "#F5F5F5", //光标停在节点上激活的默认背景色 String selectedIcon: "glyphicon glyphicon-stop", //节点被选中时显示的图标 String searchResultBackColor: "", //当节点被选中时的背景色 searchResultColor: "", //当节点被选中时的前景色 selectedBackColor: "", //当节点被选中时的背景色 selectedColor: "#FFFFFF", //当节点被选中时的前景色 showBorder: true, //是否在节点周围显示边框 showCheckbox: false, //是否在节点上显示复选框 showIcon: true, //是否显示节点图标 showTags: false, //是否显示每个节点右侧的标记。前提是这个标记必须在每个节点基础上提供数据结构中的值。 uncheckedIcon: "glyphicon glyphicon-unchecked", //未选中的复选框时显示的图标,可以与showCheckbox一起使用 };
例如:
$('#treeview').treeview({ data: defaultData, color: "#4F4F4F", expandIcon: 'glyphicon glyphicon-chevron-right', collapseIcon: 'glyphicon glyphicon-chevron-down', nodeIcon: 'glyphicon glyphicon-bookmark', enableLinks: true, levels: 1, showIcon:false, selectedBackColor: "", selectedColor: "#333" });
三、使用方法
1、你可以通过两种方式来调用方法
1、插件包装器:插件的包装器可以作为访问底层方法的代理。
$('#treeview').treeview('methodName', args)
多个参数必须使用数组对象来传入。
2、直接使用treeview:你可以通过下面两种方法中的一种来获取treeview对象实例。
// 该方法返回一个treeview的对象实例 $('#treeview').treeview(true) .methodName(args); // 对象实例也保存在DOM元素的data中, // 可以使用'treeview'的id来访问它。 $('#treeview').data('treeview') .methodName(args);
2、treeview方法列表
-
checkAll(options)
:选择所有的节点。$(
'#treeview'
).treeview(
'checkAll'
, { silent:
true
});
触发
nodeChecked
事件,传入silent
来阻止其它事件。 -
checkNode(node | nodeId, options)
:选择指定的节点,接收节点或节点ID。$(
'#treeview'
).treeview(
'checkNode'
, [ nodeId, { silent:
true
} ]);
触发
nodeChecked
事件,传入silent
来阻止其它事件。 -
clearSearch()
:清空以前的搜索结果。例如清除它们的高亮状态。$(
'#treeview'
).treeview(
'clearSearch'
);
触发
searchCleared
事件。 -
collapseAll(options)
:折叠所有的节点,折叠整个树。$(
'#treeview'
).treeview(
'collapseAll'
, { silent:
true
});
触发
nodeCollapsed
事件,传入silent
来阻止其它事件。 -
collapseNode(node | nodeId, options)
:折叠指定节点和它的子节点。如果不想折叠子节点,可以设置{ ignoreChildren: true }
。$(
'#treeview'
).treeview(
'collapseNode'
, [ nodeId, { silent:
true
, ignoreChildren:
false
} ]);
触发
nodeCollapsed
事件,传入silent
来阻止其它事件。 -
disableAll(options)
:禁用所有的节点。$(
'#treeview'
).treeview(
'disableAll'
, { silent:
true
});
触发
nodeDisabled
事件,传入silent
来阻止其它事件。 -
disableNode(node | nodeId, options)
:禁用指定的节点,接收节点或节点ID。$(
'#treeview'
).treeview(
'disableNode'
, [ nodeId, { silent:
true
} ]);
触发
nodeDisabled
事件,传入silent
来阻止其它事件。 -
enableAll(options)
:启用所有的节点。$(
'#treeview'
).treeview(
'enableAll'
, { silent:
true
});
触发
nodeEnabled
事件,传入silent
来阻止其它事件。 -
enableNode(node | nodeId, options)
:启用指定的节点,接收节点或节点ID。$(
'#treeview'
).treeview(
'enableNode'
, [ nodeId, { silent:
true
} ]);
触发
nodeEnabled
事件,传入silent
来阻止其它事件。 -
expandAll(options)
:展开所有的树节点。也可以展开任何给定级别的树节点。$(
'#treeview'
).treeview(
'expandAll'
, { levels: 2, silent:
true
});
触发
nodeExpanded
事件,传入silent
来阻止其它事件。 -
expandNode(node | nodeId, options)
:展开指定的树节点,接收节点或节点ID。也可以展开任何给定级别的树节点。$(
'#treeview'
).treeview(
'expandNode'
, [ nodeId, { levels: 2, silent:
true
} ]);
触发
nodeExpanded
事件,传入silent
来阻止其它事件。 -
getCollapsed()
:返回折叠节点的数组。例如state.expanded = false
。$(
'#treeview'
).treeview(
'getCollapsed'
, nodeId);
-
getDisabled()
:返回被禁用节点的数组。$(
'#treeview'
).treeview(
'getDisabled'
, nodeId);
-
getEnabled()
:返回可用节点的数组。$(
'#treeview'
).treeview(
'getEnabled'
, nodeId);
-
getExpanded()
:返回所有展开节点的数组。$(
'#treeview'
).treeview(
'getExpanded'
, nodeId);
-
getNode(nodeId)
:返回给定节点ID的单一节点对象。$(
'#treeview'
).treeview(
'getNode'
, nodeId);
-
getParent(node | nodeId)
:返回给定节点的父节点,如果没有则返回undefined。$(
'#treeview'
).treeview(
'getParent'
, node);
-
getSelected()
:返回所有被选择节点的数组,例如:state.selected = true
。$(
'#treeview'
).treeview(
'getSelected'
, nodeId);
-
getSiblings(node | nodeId)
:返回给定节点的兄弟节点的数组,如果没有则返回undefined。$(
'#treeview'
).treeview(
'getSiblings'
, node);
-
getUnselected()
:返回没有被选择节点的数组。例如:state.selected = false
。$(
'#treeview'
).treeview(
'getUnselected'
, nodeId);
-
remove()
:移除列表树容器。移除附加的事件、附加对象和额外的html元素。$(
'#treeview'
).treeview(
'remove'
);
-
revealNode(node | nodeId, options)
:显示一个树节点,展开从这个节点开始到根节点的所有节点。$(
'#treeview'
).treeview(
'revealNode'
, [ nodeId, { silent:
true
} ]);
触发
nodeExpanded
事件,传入silent
来阻止其它事件。 -
search(pattern, options)
:搜索匹配是非常的指定树节点,并高亮它们。返回配平节点的数组。$(
'#treeview'
).treeview(
'search'
, [
'Parent'
, {
ignoreCase:
true
,
// case insensitive
exactMatch:
false
,
// like or equals
revealResults:
true
,
// reveal matching nodes
}]);
$('##treeview'
).treeview('search', [ value,{ ignoreCase: false, exactMatch: false },attr]);
value:值,
attr:需要查询的属性
触发
searchComplete
事件。 -
selectNode(node | nodeId, options)
:选择一个给定的树节点,接收节点或节点ID。$(
'#treeview'
).treeview(
'selectNode'
, [ nodeId, { silent:
true
} ]);
触发
nodeSelected
事件,传入silent
来阻止其它事件。 -
toggleNodeChecked(node | nodeId, options)
:切换节点的Check状态。$(
'#treeview'
).treeview(
'toggleNodeChecked'
, [ nodeId, { silent:
true
} ]);
触发
nodeChecked
事件或nodeUnchecked
事件,传入silent
来阻止其它事件。 -
toggleNodeDisabled(node | nodeId, options)
:切换一个节点的可用和不可用状态。$(
'#treeview'
).treeview(
'toggleNodeDisabled'
, [ nodeId, { silent:
true
} ]);
触发
nodeDisabled
事件或nodeEnabled
事件,传入silent
来阻止其它事件。 -
toggleNodeExpanded(node | nodeId, options)
:切换一个节点的展开和折叠状态。$(
'#treeview'
).treeview(
'toggleNodeExpanded'
, [ nodeId, { silent:
true
} ]);
触发
nodeExpanded
事件或nodeCollapsed
事件,传入silent
来阻止其它事件。 -
toggleNodeSelected(node | nodeId, options)
:切换一个节点的选择状态。$(
'#treeview'
).treeview(
'toggleNodeSelected'
, [ nodeId, { silent:
true
} ]);
触发
nodeSelected
事件或nodeUnselected
事件,传入silent
来阻止其它事件。 -
uncheckAll(options)
:Uncheck所有的节点。$(
'#treeview'
).treeview(
'uncheckAll'
, { silent:
true
});
触发
nodeUnchecked
事件,传入silent
来阻止其它事件。 -
uncheckNode(node | nodeId, options)
:Uncheck一个给定的节点,接收节点或节点ID。$(
'#treeview'
).treeview(
'uncheckNode'
, [ nodeId, { silent:
true
} ]);
触发
nodeUnchecked
事件,传入silent
来阻止其它事件。 -
unselectNode(node | nodeId, options)
:不选择指定的节点,接收节点或节点ID。$(
'#treeview'
).treeview(
'unselectNode'
, [ nodeId, { silent:
true
} ]);
触发
nodeUnselected
事件,传入silent
来阻止其它事件。
四、事件
你可以在参数中使用回调函数来绑定任何事件,或者使用标准的jQuery.on()方法来绑定事件。
在参数中调用的示例
$('#treeview').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()方法:
$('#treeview').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)
:搜索结果被清除之后触发。
五、Demo
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>treeviewDemo</title> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"> <script src="https://cdn.bootcss.com/jquery/2.0.3/jquery.js"></script> <script src="https://cdn.bootcss.com/bootstrap-treeview/1.2.0/bootstrap-treeview.min.js"></script> </head> <body> <div id="treeview"></div> <script type="text/javascript"> // $(function(){...})这个是在页面DOM文档加载完成后加载执行的,等效于$(document).ready(function(){...}); // 优于window.onload,后者必须等到页面内包括图片的所有元素加载完毕后才能执行 $(function () { var defaultData = [ { text: 'Parent 1', tags: ['2'], nodes: [ { text: 'Child 1', tags: ['3'], nodes: [ { text: 'Grandchild 1', tags: ['6'] }, { text: 'Grandchild 2', tags: ['3'] } ] }, { text: 'Child 2', tags: ['3'] } ] }, { text: 'Parent 2', tags: ['7'] }, { text: 'Parent 3', icon: 'glyphicon glyphicon-earphone', href: '#demo', tags: ['11'] }, { text: 'Parent 4', icon: 'glyphicon glyphicon-cloud-download', href: '/demo.html', tags: ['19'], selected: true }, { text: 'Parent 5', icon: 'glyphicon glyphicon-certificate', color: 'pink', backColor: 'red', href: 'http://www.tesco.com', tags: ['available', '0'] } ]; $('#treeview').treeview({ data: defaultData, color: "#4F4F4F", expandIcon: 'glyphicon glyphicon-chevron-right', collapseIcon: 'glyphicon glyphicon-chevron-down', nodeIcon: 'glyphicon glyphicon-bookmark', enableLinks: true, levels: 1, showIcon: false, selectedBackColor: "", selectedColor: "#333" }); $('#treeview').on('nodeSelected', function (event, data) { console.log(data); }) }); </script> </body> </html>