インストール
composer require 'drupal/views_tree:^3.0'
概要
Views Treeモジュールは、クエリ結果をネストされた階層ツリーとしてレンダリングするViewsスタイルプラグインを提供します。各レコードが親レコードへの参照を持つ隣接モデルを使用してツリー構造を構築します。階層的な出力にもかかわらず、単一のデータベースクエリのみが実行されるため、大規模なデータセットでも高いパフォーマンスを発揮します。
このモジュールは2つの表示形式をサポートしています:ネストされたHTMLリスト(順序なしまたは順序付き)と、階層レベルを示す視覚的なインデントを持つテーブル形式です。また、Entity Referenceフィールド内でエンティティを階層ツリー形式で表示するEntity Reference選択プラグインも含まれています。オプションのJavaScriptベースの折りたたみ機能により、ユーザーはツリーの枝をインタラクティブに展開・折りたたみできます。
これはViews 1のツリーベースのスタイルテンプレート機能の継続であり、モダンなDrupalバージョン向けに適応されています。このモジュールは、メニュー構造、組織階層、カテゴリツリー、スレッドコメント、および親子関係を持つあらゆるコンテンツの表示に最適です。
Features
- 結果をネストされた順序なしまたは順序付きHTMLリストとしてレンダリングする「Tree (list)」Viewsスタイルプラグインを提供
- 階層データをインデント付きのテーブル形式で表示する「Tree (table)」Viewsスタイルプラグインを提供
- オートコンプリートフィールド内でエンティティをツリー形式で表示するEntity Reference選択プラグイン「TreeHelper (Adjacency model)」
- JavaScriptによる折りたたみ可能なツリー機能 - ツリーは展開または折りたたまれた状態で開始し、クリックで切り替え可能
- シングルクエリパフォーマンス - 隣接モデルを使用して単一のデータベースクエリからツリー構造全体を構築
- Viewsの結果セットからプログラム的にツリー構造を構築するためのTreeHelperサービス
- テーブル表示でのCSSスタイリング用のdata属性ベースの階層レベル表示
- Node参照、User参照、Taxonomy参照を含むあらゆるEntity Referenceフィールドタイプをサポート
Use Cases
メニューまたはナビゲーション階層の表示
Views Treeを使用して、メニューアイテムやナビゲーションリンクを自然な親子構造で表示します。メニューリンクコンテンツエンティティのViewを作成し、IDフィールドをメインフィールドとして、親メニューリンク参照を親フィールドとして追加します。結果として得られるネストされたリストはメニュー階層を完璧に反映します。
組織図または会社構造
階層的な組織図でスタッフや部門を表示します。ユーザーまたはカスタムエンティティタイプに「上司」Entity Referenceフィールドがある場合、それを親フィールドとして使用して、経営陣から個々の従業員までの完全な組織階層を表示できます。
ネストされたカテゴリまたはTaxonomy表示
Taxonomy TermまたはカテゴリエンティティをComplete親子関係で表示します。製品カテゴリ、コンテンツ分類、または単一の展開可能なツリーで表示する必要があるマルチレベルのTaxonomyに特に便利です。
スレッドコメントまたはディスカッション
返信が親コメントの下にネストされて表示されるスレッド形式の会話ビューでコメントをレンダリングします。ツリー構造により、会話の流れとどのコメントがどのコメントへの返信かが明確に表示されます。
ファイルとフォルダブラウザ
ファイルシステムエクスプローラーに似た階層ツリー構造でフォルダとファイルを表示するファイル管理インターフェースを作成します。ユーザーは完全なディレクトリ構造を一目で確認できます。
階層的なEntity Reference選択
階層コンテンツ(親カテゴリや親ページの選択など)にEntity Referenceフィールドを使用する場合、Views Tree Entity Reference選択プラグインを使用してオプションをツリー形式で表示し、正しい親エンティティを簡単に理解して選択できるようにします。
Tips
- メイン識別子フィールドと親参照フィールドの両方を必ずViewに含めてください。表示から除外しても構いませんが、ツリー構造の構築に必要です
- 階層と一緒に複数のデータ列を表示する必要がある場合は「Table」スタイルを使用し、よりシンプルなネストリスト表示には「List」スタイルを使用してください
- 折りたたみ可能なツリー機能にはJavaScriptが必要です。必要に応じて非JS環境向けにCSSのみのフォールバックを提供することを検討してください
- 大規模な階層の場合は、表示されるデータ量を管理するために公開フィルタまたはページャー設定を追加することを検討してください
- Entity Reference選択で使用する場合、ユーザーはViewによって返されるすべてのエンティティを見ることができるため、Viewに適切なアクセス制御があることを確認してください
- テーブルスタイルは組み込みCSSで最大8レベルのネストをサポートします。より深い階層の場合は、追加のdata-hierarchy-level値用にカスタムCSSルールを追加してください
- 自分自身を参照する親アイテムや循環参照は自動的に処理され、ルートレベルのアイテムになります
Technical Details
Hooks 1
hook_theme
views_treeおよびviews_tree_tableテーマフックとその変数を定義