bootstrap-treeview是一款效果非常酷的基于bootstrap的jQuery多级列表树插件。该jQuery插件基于Twitter Bootstrap,以简单和优雅的方式来显示一些继承树结构,如视图树、列表树等等。
插件依赖
Bootstrap v3.0.3
jQuery v2.0.3
以上两个外部依赖文件已经经过测试可以正常使用,其他版本的Bootstrap需要另行测试。该插件不支持bootstrap 2。
使用方法
首先要在页面中引入依赖文件和 bootstrap-treeview.js文件。
<link href="./css/bootstrap.css" rel="stylesheet">
<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:"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: [
{},
...
]
.......//可以扩展属性
}
全局参数
参数可以定制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'
});