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' });
