ネストされたツリーとフラット ツリー

ツリーコンポーネントは非常に一般的で実用的です。すべてのツリー コンポーネントがネストされているわけではないことに気づきましたか?

背景

私たちの目標は、ブラウザーでツリー データ構造を視覚化することです。

  // 一个基本的树形数据结构
  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"
          }
        ]
      }
    ]
  };

これには 2 つの子ノードがあり、各子ノードには 1 つの子ノードがあります。

入れ子になったツリー

私は当初、ツリーコンポーネントの構造が入れ子になっていると想定していました。これは、ツリー構造を生成する最も直感的な方法です。データ構造を反復処理して、HTML 要素に変換するだけです。

function nestedTreeGenerator(treeData, depth) {
  const nodes = [];

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

次の HTML 構造が生成されます。これは典型的な HTML 構造であり、ツリーに折りたたみ/展開機能を簡単に追加できます。

平らな木

フラットツリーはリストですが、見た目は木です。

function flatTreeGenerator(treeData, depth, parentId) {
  let nodes = [];

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

最終的な結果は以下に示すものと同じになります。階層情報が失われないように、ノード ID と親 ID を保存しました。凹みは自然に発生するものではないので、自分で対処する必要があります。

完全な例

2 つの木は同じに見えます。ただし、ツリー ノードの上にマウスを置くと、動作が少し異なることに気づくでしょう。ネストされたツリーには常にインデントのある背景色が付いていますが、フラット ツリーにはありません。

概要

VS Code をダウンロードしてから、フラット ツリーについて初めて知りました。 VS Code ではフォルダー構造がエレガントに表示され、リストのように見えますが、フォルダーを折りたたんだり展開したりできることがわかりました。私のお気に入りの点は、フォルダーまたはファイルの上にカーソルを置くと、列全体が強調表示されることです。

ネストされたツリーを使用すると、階層構造に基づいてツリー関連の機能を簡単に実装できます。

平らな木はきれいに見えます。シンプルな構造なのでCSSスタイルを適用するのも簡単です。

それぞれに長所と短所がありますので、ニーズに応じて適切なタイプを選択してください。

以上がネストされたツリーとフラット ツリーの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。