订阅bootstrap样式的树形结构
来源：网络收集 点击： 时间：2024-07-19下载相应的库文件：
在百度中搜索bootstrap-treeview，找到对应的JS库文件并下载。注意下载的文件里应包含js与css。
2/7导入bootstrap-treeview库：
bootstrap-treeview依赖于jQuery v2.0.3版本及以上，所以在导入时，要在Jquery文件后导入。CSS文件的导入则没有什么限制。
导入时所使用的代码如下（路径请自行确定）：
link rel=stylesheet type=text/css href=./bootstrap-treeview/bootstrap-treeview.min.css
script src=./lib/bootstrap-treeview/bootstrap-treeview.min.js/script
3/7树型JSON结构：
树形结构的层次及各种显示内容是用JSON格式的数据来保存的，通常是在程序运行过程中动态生成了。为了展示方便，一个静态的JSON树形结构的代码如下所示：
var data = , // 结构最右侧浮动显示的说明文字
state: {
expanded: true // 有子结点的时候默认展开
},
nodes:
},
{
text: Child 2
}
]
},
{ // 兄弟结点
text: Parent 2
}
];
4/7结点的各种属性：
一个结点，除了上述提到的属性外，还可以设置以下的这些属性来显示不同的外观：
text:Node1,
icon:glyphiconglyphicon-stop, // 设置的内容取决代码里使用的是那一种图标库。
selectedIcon:glyphiconglyphicon-stop, // 设置的样例值是bootstrap3自带的图标，如果你用的是bootstrap2或4，就看不到图标效果了。
color:#ff0000,
backColor:#00FFFF,
href:#node-1, //结合全局enableLinks选项为列表树节点指定URL。
selectable:true, //指定列表树的节点是否可选择。设置为false将使节点展开，并且不能被选择。
state:{
checked:true,
disabled:true,
expanded:true,
selected:true
},
tags:,
nodes:
5/7初始化树对象：
有了上面的基础知识后，就可以在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属性正确显示。
6/7treeview方法与事件：
treeview方法提供的方法比较丰富，在这里就不一一列举了。只简单举个例子，以下是调用checkAll方法：
$(#tree).treeview(checkAll, { silent: true});
而事件的绑定可以通过以下两种方式来操作：
1.初始化树对象的回调函数：
$(#tree).treeview({
onNodeSelected: function(event, data) {
// 事件代码...
});
2. 使用jQuery.on方法：
$(#tree).on(nodeSelected, function(event, data) {
// 事件代码...
});
7/7你要注意的事情：
目前bootstrap-treeview的JS库所对应的bootstrap版本为3。如果你使用的是bootstrap2或4，则在有一些效果上会出现偏差。遇到这种情况，你可以根据bootstrap3的CSS效果，在现在的代码去再实现一下即可。
JS树型结构 版权声明：
1、本文系转载，版权归原作者所有，旨在传递信息，不代表看本站的观点和立场。
2、本站仅提供信息发布平台，不承担相关法律责任。
3、若侵犯您的版权或隐私，请联系本站管理员删除。
4、文章链接：http://www.1haoku.cn/art_969552.html
