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"
}
|
