原生无限级目录树

当涉及到原生的无限级目录树，我们可以使用递归算法来实现。以下是一个使用 JavaScript 实现原生无限级目录树的示例

介绍

原生无限级目录树是一种常见的数据结构，用于组织多层级的目录或分类数据。通过递归算法，我们可以动态地构建和展示这样的目录树结构。

示例代码

// 目录树数据
var data = [
  {
    
    
    id: 1,
    name: '目录1',
    children: [
      {
    
    
        id: 2,
        name: '目录1.1',
        children: [
          {
    
    
            id: 3,
            name: '目录1.1.1',
            children: []
          },
          {
    
    
            id: 4,
            name: '目录1.1.2',
            children: []
          }
        ]
      },
      {
    
    
        id: 5,
        name: '目录1.2',
        children: []
      }
    ]
  },
  {
    
    
    id: 6,
    name: '目录2',
    children: []
  }
];

// 渲染目录树
function renderTree(data, container) {
    
    
  // 创建无序列表元素
  var ul = document.createElement('ul');

  // 遍历目录树数据
  for (var i = 0; i < data.length; i++) {
    
    
    var item = data[i];
    
    // 创建列表项元素
    var li = document.createElement('li');
    
    // 创建文本节点
    var textNode = document.createTextNode(item.name);
    
    // 将文本节点添加到列表项
    li.appendChild(textNode);

    // 如果当前目录项有子目录，则递归渲染子目录
    if (item.children && item.children.length > 0) {
    
    
      renderTree(item.children, li);
    }
    
    // 将列表项添加到无序列表
    ul.appendChild(li);
  }

  // 将无序列表添加到容器
  container.appendChild(ul);
}

// 获取容器元素
var container = document.getElementById('tree-container');

// 渲染目录树
renderTree(data, container);

代码解释

1. 定义了一个示例的目录树数据 data，每个目录项包含 id、name 和 children 属性。
2. 创建 renderTree() 函数，用于渲染目录树。
3. 在 renderTree() 函数中，首先创建一个无序列表元素 ul。
4. 使用 for 循环遍历目录树数据中的每个目录项。
5. 创建列表项元素 li，并创建文本节点 textNode，将目录项的名称添加到列表项中。
6. 如果当前目录项有子目录（即 children 属性不为空），则递归调用 renderTree() 函数，将子目录数据和当前列表项作为参数进行渲染。
7. 将列表项 li 添加到无序列表 ul 中。
8. 最后，将无序列表 ul 添加到指定的容器元素中。

这样，通过递归调用 renderTree() 函数，我们可以将目录树数据动态地渲染为无限级的目录树结构。