嵌套樹與扁平樹

樹形組件非常常見且實用。您是否注意到並非所有樹形組件都是嵌套結構的呢？

背景

我們的目標是在瀏覽器中可視化樹形數據結構。

<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中文網其他相關文章！