bootstrap3 treeview组件实现多级菜单
程序员文章站
2022-06-08 10:41:56
...
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- 兼容IE -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<style type="text/css">
.treeview-small{
width:200px;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-sm-4">
<h2>默认</h2>
<div id="treeview1" class="">
</div>
</div>
</div>
</div>
<!-- Script -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js"></script>
<!-- <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"></script> -->
<script src="https://cdn.bootcss.com/bootstrap-treeview/1.2.0/bootstrap-treeview.min.js"></script>
<script type="text/javascript">
$(function() {
// 设置树的相关属性并构造树
$('#treeview1').treeview({
backColor: "#FFFFFF",
color: "#428bca",
enableLinks: false,
data: getTree()
});
//定义树里的数据来源
function getTree(){
var data = [
{
text: 'Parent 1',
href: '#parent1',
nodes: [
{
text: 'Child 1',
href: '#child1',
nodes: [
{
text: 'Grandchild 1',
href: '#grandchild1',
},
{
text: 'Grandchild 2',
href: '#grandchild2',
}
]
},
{
text: 'Child 2',
href: '#child2',
}
]
},
{
text: 'Parent 2',
href: '#parent2',
},
{
text: 'Parent 3',
href: '#parent3',
},
{
text: 'Parent 4',
href: '#parent4',
},
{
text: 'Parent 5',
href: '#parent5',
}
];
return data;
}
$('#treeview1').addClass('treeview-small');
$('#treeview1').on('nodeSelected',function(event,data){ //插件中的方法
if(data.nodes == null){
alert('准备使用ajax');
}else{
return;
}
});
});
</script>
</body>
</html>
上一篇： [WPF] 在UserControl的xaml里绑定依赖属性
下一篇： PHP求天数常犯的错误详解