JS无限树状列表实现代码

概述

本攻略旨在讲解如何使用 JavaScript 实现无限树状列表。代码实现基于递归算法和 HTML/CSS。

前置知识

1. HTML

2. CSS

3. JavaScript

实现思路

实现无限树状列表，我们需要将所有的节点组织起来，并且保证每个节点在其父节点的下级目录中。

实现这个思路，我们可以用一个对象数组来存储节点信息。每个节点信息主要包括以下字段：

1. id: 节点的唯一标识符

2. name: 节点名称

3. parentId: 父节点的唯一标识符

通过 parentId 可以将每个节点连接起来，形成一个树形结构。

实现步骤

1. 准备数据源

js
let nodes = [
{ id: 1, name: "Node 1", parentId: null },
{ id: 2, name: "Node 1-1", parentId: 1 },
{ id: 3, name: "Node 1-1-1", parentId: 2 },
{ id: 4, name: "Node 1-1-2", parentId: 2 },
{ id: 5, name: "Node 1-1-3", parentId: 2 },
{ id: 6, name: "Node 1-2", parentId: 1 },
{ id: 7, name: "Node 1-3", parentId: 1 },
{ id: 8, name: "Node 2", parentId: null },
{ id: 9, name: "Node 2-1", parentId: 8 },
{ id: 10, name: "Node 2-1-1", parentId: 9 },
{ id: 11, name: "Node 2-1-2", parentId: 9 },
{ id: 12, name: "Node 2-2", parentId: 8 },
{ id: 13, name: "Node 2-2-1", parentId: 12 },
{ id: 14, name: "Node 2-2-2", parentId: 12 },
{ id: 15, name: "Node 2-2-3", parentId: 12 },
{ id: 16, name: "Node 2-3", parentId: 8 },
];

1. 定义递归函数，用于遍历节点

```js
function generateTree(parentId, nodes) {
let html = "";

 let childNodes = nodes.filter((node) => node.parentId === parentId);

 if (childNodes.length === 0) {
   return "";
 }

 html += "<ul>";

 childNodes.forEach((node) => {
   html += "<li>";
   html += node.name;
   html += generateTree(node.id, nodes);
   html += "</li>";
 });

 html += "</ul>";

 return html;

}
```

该函数通过输入的 parentId 和节点数组 nodes，找到对应的子节点，并按照层级关系递归地生成HTML。如果子节点数为 0，则停止递归。

1. 将树形结构渲染到页面上

js
document.getElementById("tree").innerHTML = generateTree(null, nodes);

该代码将生成的 HTML 插入到页面上的指定元素。

示例说明

示例一

假设我们有如下的节点数据：

let nodes = [
  { id: 1, name: "Node 1", parentId: null },
  { id: 2, name: "Node 1-1", parentId: 1 },
  { id: 3, name: "Node 1-1-1", parentId: 2 },
  { id: 4, name: "Node 1-1-2", parentId: 2 },
  { id: 5, name: "Node 1-1-3", parentId: 2 },
  { id: 6, name: "Node 1-2", parentId: 1 },
  { id: 7, name: "Node 1-3", parentId: 1 },
];

运行代码

document.getElementById("tree").innerHTML = generateTree(null, nodes);

会在界面上生成如下的无限树状列表：

<ul>
  <li>Node 1
    <ul>
      <li>Node 1-1
        <ul>
          <li>Node 1-1-1</li>
          <li>Node 1-1-2</li>
          <li>Node 1-1-3</li>
        </ul>
      </li>
      <li>Node 1-2</li>
      <li>Node 1-3</li>
    </ul>
  </li>
</ul>

示例二

假设我们有如下的节点数据：

let nodes = [
  { id: 1, name: "Node 1", parentId: null },
  { id: 2, name: "Node 1-1", parentId: 1 },
  { id: 3, name: "Node 1-1-1", parentId: 2 },
  { id: 4, name: "Node 1-2", parentId: 1 },
];

运行代码

document.getElementById("tree").innerHTML = generateTree(null, nodes);

会在界面上生成如下的无限树状列表：

<ul>
  <li>Node 1
    <ul>
      <li>Node 1-1
        <ul>
          <li>Node 1-1-1</li>
        </ul>
      </li>
      <li>Node 1-2</li>
    </ul>
  </li>
</ul>

总结

通过上述步骤，我们可以轻松实现无限树状列表。在具体应用中，根据不同的需求和数据结构可以灵活运用递归和条件语句生成任意层级的树形结构。