bootstrap-treeview

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