bootstarp实现树形菜单,联动数据
时间: 2024-01-15 16:04:33 浏览: 31
要在Bootstrap中实现树形菜单并实现联动数据,可以使用Bootstrap Treeview插件。以下是实现步骤:
1.在页面中引入jQuery和Bootstrap Treeview插件的CSS和JS文件。
```html
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-treeview/1.2.0/bootstrap-treeview.min.css" />
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-treeview/1.2.0/bootstrap-treeview.min.js"></script>
```
2.在页面中添加两个用于显示树形结构的容器元素。
```html
<div id="treeview1"></div>
<div id="treeview2"></div>
```
3.使用jQuery将数据渲染到树形结构中,并实现联动数据。
```javascript
$(function() {
var data1 = [
{
text: "节点1",
value: "1",
nodes: [
{
text: "子节点1",
value: "11"
},
{
text: "子节点2",
value: "12"
}
]
},
{
text: "节点2",
value: "2",
nodes: [
{
text: "子节点3",
value: "21"
},
{
text: "子节点4",
value: "22"
}
]
}
];
var data2 = [
{
text: "请选择",
value: ""
}
];
$('#treeview1').treeview({
data: data1,
onNodeSelected: function(event, node) {
var selectedValue = node.value;
data2 = [
{
text: "请选择",
value: ""
}
];
if(selectedValue == "1") {
data2.push({
text: "子节点1",
value: "11"
});
data2.push({
text: "子节点2",
value: "12"
});
}
else if(selectedValue == "2") {
data2.push({
text: "子节点3",
value: "21"
});
data2.push({
text: "子节点4",
value: "22"
});
}
$('#treeview2').treeview({
data: data2
});
}
});
$('#treeview2').treeview({
data: data2
});
});
```
以上代码将生成两个树形结构,第一个结构为根节点为"节点1"和"节点2"的树形菜单,第二个结构为初始只有一个"请选择"节点的树形菜单。当在第一个结构中选择一个节点时,第二个结构会根据所选节点的值动态生成子节点。可以根据实际需要修改数据和样式。