bootstrap treeview控件使用详解
的有关信息介绍如下:这是一个简单而优雅的解决方案,显示分层树结构(即树视图),现在就介绍它的用法。
依赖:
bootstrap-treeview需要依赖bootstrap和jquery两个框架,现在具体需要的框架版本到官方网站去查。
基本用法:
添加以下资源以使引导树视图正常工作。
将组件绑定到任何现有的DOM元素。例如通过div标签的id绑定。
基本用法可能如下所示(JavaScript代码)
数据结构
为了定义树所需的层次结构,需要提供一个JavaScript对象的嵌套数组。
一个树节点被表示为一个简单的JavaScript对象。 这是一个必需的属性文本将建立一棵树。
如果你想做更多,这里是完整的节点规范
它的属性,方法等可以到官方网站或百度查:例如节点特定图标,颜色和标记等。
代码例子:
默认
自定义图标
丰富多彩
$(function() {
var defaultData = [
{
text: 'Parent 1',
href: '#parent1',
tags: ['4'],
nodes: [
{
text: 'Child 1',
href: '#child1',
tags: ['2'],
nodes: [
{
text: 'Grandchild 1',
href: '#grandchild1',
tags: ['0']
},
{
text: 'Grandchild 2',
href: '#grandchild2',
tags: ['0']
}
]
},
{
text: 'Child 2',
href: '#child2',
tags: ['0']
}
]
},
{
text: 'Parent 2',
href: '#parent2',
tags: ['0']
},
{
text: 'Parent 3',
href: '#parent3',
tags: ['0']
},
{
text: 'Parent 4',
href: '#parent4',
tags: ['0']
},
{
text: 'Parent 5',
href: '#parent5' ,
tags: ['0']
}
];
$('#treeview1').treeview({
backColor: "#FFFFFF",
color: "#428bca",
enableLinks: true,
data: defaultData
});
$('#treeview2').treeview({
color: "#428bca",
expandIcon: 'glyphicon glyphicon-chevron-right',
collapseIcon: 'glyphicon glyphicon-chevron-down',
nodeIcon: 'glyphicon glyphicon-bookmark',
data: defaultData
});
$('#treeview3').treeview({
expandIcon: "glyphicon glyphicon-stop",
collapseIcon: "glyphicon glyphicon-unchecked",
nodeIcon: "glyphicon glyphicon-user",
color: "yellow",
backColor: "purple",
onhoverColor: "orange",
borderColor: "red",
showBorder: false,
showTags: true,
highlightSelected: true,
selectedColor: "yellow",
selectedBackColor: "darkorange",
data: defaultData
});
});