js 写一个有父id的递归展示
时间: 2024-02-11 14:05:49 浏览: 105
假设你有一个数据结构如下:
```
const data = [
{ id: 1, parent_id: null, name: 'Parent 1' },
{ id: 2, parent_id: 1, name: 'Child 1-1' },
{ id: 3, parent_id: 1, name: 'Child 1-2' },
{ id: 4, parent_id: 2, name: 'Grandchild 1-1-1' },
{ id: 5, parent_id: 3, name: 'Grandchild 1-2-1' },
{ id: 6, parent_id: null, name: 'Parent 2' },
{ id: 7, parent_id: 6, name: 'Child 2-1' },
{ id: 8, parent_id: 6, name: 'Child 2-2' },
{ id: 9, parent_id: 8, name: 'Grandchild 2-2-1' },
];
```
你可以使用递归函数来展示这个数据结构:
```
function renderTree(parentId, data) {
const children = data.filter(item => item.parent_id === parentId);
if (children.length === 0) {
return '';
}
let result = '<ul>';
for (let i = 0; i < children.length; i++) {
result += `<li>${children[i].name}</li>`;
result += renderTree(children[i].id, data);
}
result += '</ul>';
return result;
}
// 展示 parentId 为 1 的树形结构
const html = renderTree(1, data);
document.getElementById('tree').innerHTML = html;
```
这个函数会递归遍历数据结构,找到所有 `parent_id` 为指定 `parentId` 的节点,并将它们的名称展示在一个 `<ul>` 标签里。如果一个节点没有子节点,那么递归就会停止。你可以将这个函数的结果插入到页面中的任何位置,例如:
```
<div id="tree"></div>
```
阅读全文