bootsrap treeview
Posted 爱喝啤酒的猴子
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了bootsrap 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:
如何包含特定 TreeView 节点的复选框？
|