嵌套树与扁平树

树形组件非常常见且实用。您是否注意到并非所有树形组件都是嵌套结构的呢？

背景

我们的目标是在浏览器中可视化树形数据结构。

<code class="language-javascript">  // 一个基本的树形数据结构
  const treeData = {
    id: 0,
    name: "root",
    children: [
      {
        id: 1,
        name: "node 1",
        children: [
          {
            id: 3,
            name: "node 1.1"
          }
        ]
      },
      {
        id: 2,
        name: "node 2",
        children: [
          {
            id: 4,
            name: "node 2.1"
          }
        ]
      }
    ]
  };</code>

它有两个子节点，每个子节点又分别有一个子节点。

嵌套树

我最初假设树形组件的结构是嵌套的。这是生成树形结构最直观的方式。只需遍历数据结构并将其转换为HTML元素即可。

<code class="language-javascript">function nestedTreeGenerator(treeData, depth) {
  const nodes = [];

  // ... (代码略，与原文相同) ...
}</code>

它将生成如下HTML结构。这是一个典型的HTML结构，我们可以轻松地为树添加折叠/展开功能。

扁平树

扁平树是一个列表，但看起来像一棵树。

<code class="language-javascript">function flatTreeGenerator(treeData, depth, parentId) {
  let nodes = [];

  // ... (代码略，与原文相同) ...
}</code>

最终结果与如下所示相同。我保存了节点ID和父ID，因此我们不会丢失层次结构信息。缩进不是自然形成的，因此您需要自己进行处理。

完整示例

这两棵树看起来相同。但是，将鼠标悬停在树节点上，您会发现行为略有不同。嵌套树的背景颜色始终带有缩进，而扁平树则没有。

总结

下载VS Code后，我第一次了解到扁平树。我发现VS Code优雅地显示了我的文件夹结构，它看起来像一个列表，但您可以折叠/展开文件夹。我最喜欢的一点是，当您将光标悬停在文件夹或文件上时，整列都会高亮显示。

使用嵌套树，您可以根据其层次结构轻松在其上实现与树相关的功能。

扁平树看起来更简洁。由于其简单的结构，很容易为其应用CSS样式。

它们各有优缺点，请根据您的需求选择合适的类型。

以上是嵌套树与扁平树的详细内容。更多信息请关注PHP中文网其他相关文章！