bootstrap样式的树形结构

1、下载相应的库文件：在百度中搜索bootstrap-treeview，找到对应的JS库文件并下载。注意下载的文件里应包含js与css。

3、树型亭盍誓叭JSON结构：树形结构的层次及各种显示内容是用JSON格式的数据来保存的，通常是在程序运行过程中动态生成了。为了展示方便，一个静态的JSON树形结籁缰汾秘构的代码如下所示：var data = [ { text: "Parent 1", // 结点文字 icon: "oi oi-chevron-right", // 未选中时文字左侧的图标 selectedIcon: "oi oi-badge", // 选中时文字左侧的图标 tags: [9], // 结构最右侧浮动显示的说明文字 state: { expanded: true // 有子结点的时候默认展开 }, nodes: [ // 定义子结点 { text: "Child 1", nodes: [ // 定义子结点 { text: "Grandchild 1" }, { text: "Grandchild 2" } ] }, { text: "Child 2" } ] }, { // 兄弟结点 text: "Parent 2" }];

5、初始化树对象：有了上面的基础知识后，就可以在UI上构建我们的树对象了：首先来一个DIV：<div id="my_tree"></div>然后在初始加载时往上面的DIV中填充树型结构：$(function () { $('#my_tree').treeview({data: getTreeJSON(), showTags: true});});function getTreeJSON() { var data = 动态构造树形JSON结构 return data;}treeview的data参数就是动态构造树形JSON结构，而showTags标识符设置为true，才能让模板结点的tags属性正确显示。

7、你要注意的事情：目前bootstrap-treeview的JS库所对应的bootstrap版本为3。如果你使用的是bootstrap2或4，则在有一些效果上会出现偏差。遇到这种情况，你可以根据bootstrap3的CSS效果，在现在的代码去再实现一下即可。