html 代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Bootstrap 3 的多级下拉动态菜单示例,按钮控制</title>
<script type="text/javascript" src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<link rel="stylesheet" href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css"/>
<script type="text/javascript" src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
</head>
<body>
<div id="tree" class="col-sm-2"></div>
</body>
js代码:
function getTree()
{
// Some logic to retrieve, or generate tree structure
//从后台获取
var data
= [
{
text:"Parent1",
href:"https://fanyi.baidu.com/?aldtype=16047#en/zh/prototype",
nodes:
[
{
text:"Child1",
nodes:
[
{
text:"Grandchild1",
icon:"glyphicon glyphicon-leaf",
href:"http://www.baidu.com"
},
{
text:"Grandchild2"
}
]
},
{
text:"Child2"
}
]
},
{
text:"Parent2"
},
{
text:"Parent3"
},
{
text:"Parent4"
},
{
text:"Parent5"
}
];
return data;
}
$('#tree').treeview({
data: getTree(),
//backColor:"black",
color:"#428bca",
showBorder:false,
expandIcon: 'glyphicon glyphicon-chevron-right',
collapseIcon: 'glyphicon glyphicon-chevron-down',
nodeIcon: 'glyphicon glyphicon-bookmark',
//highlightSelected:false,
//onhoverColor:"red",
enableLinks: true,
levels:1,
//nodeIcon:"glyphicon glyphicon-stop",
// 添加节点方法
addNode: $.proxy(this.addNode, this),
// 删除节点方法
deleteNode: $.proxy(this.deleteNode, this),
deleteChildrenNode: $.proxy(this.deleteChildrenNode, this),
});
如果对您有帮助的话,请点赞支持一哈