treeNames: "陕西高速公路服务有限责任公司/西安市高速公路服务有限公司/曲江服务区有限公司" 如何根据这样的数组元素在页面上多层显示
时间: 2023-12-04 17:02:36 浏览: 32
你可以使用树形结构展示这些元素。具体实现方式可以使用 HTML 和 JavaScript 来实现。
首先,你需要创建一个树形结构的 HTML 模板,每个节点都包含一个标签和一个子节点列表。例如:
```html
<ul id="tree">
<li>
<a href="#">陕西高速公路服务有限责任公司</a>
<ul>
<li>
<a href="#">西安市高速公路服务有限公司</a>
<ul>
<li>
<a href="#">曲江服务区有限公司</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
```
然后,你需要编写 JavaScript 代码,将这些数组元素转换为树形结构,并动态地将它们添加到 HTML 中。你可以使用递归函数来实现这个过程。例如:
```javascript
function buildTree(parent, items) {
var ul = document.createElement('ul');
parent.appendChild(ul);
items.forEach(function(item) {
var li = document.createElement('li');
var a = document.createElement('a');
a.textContent = item;
li.appendChild(a);
ul.appendChild(li);
if (Array.isArray(item.children)) {
buildTree(li, item.children);
}
});
}
var items = [
{
name: '陕西高速公路服务有限责任公司',
children: [
{
name: '西安市高速公路服务有限公司',
children: [
{
name: '曲江服务区有限公司'
}
]
}
]
}
];
var tree = document.getElementById('tree');
buildTree(tree, items);
```
这样,页面上就会显示一个树形结构,其中每个节点都有一个可展开的子节点列表。用户可以单击节点旁边的箭头来展开或收起子节点列表。