syncfusion-angular-treeview

Angular での TreeView の実装

TreeView コンポーネントは、チェックボックス、ドラッグ＆ドロップ、インプレース編集、複数選択、フィルタリング、並べ替え、テンプレート、キーボード操作などのインタラクティブな機能を標準でサポートし、階層データをツリー形式で表示します。ファイルシステム、組織図、カテゴリ階層、ナビゲーションメニューなど、あらゆる入れ子構造のデータの表示に適しています。

このスキルを使用する場面

• 階層型 UI の構築：親子関係にあるデータの表示
• ファイル／フォルダーのブラウザー：展開／折りたたみが可能なディレクトリ構造の表示
• ナビゲーション構造：メニューシステムやサイト階層の作成
• データの整理：カテゴリ化されたデータや入れ子構造のデータの表示
• インタラクティブな選択：複数選択やチェックボックスによる選択の実装
• ドラッグ＆ドロップインターフェース：ノードのドラッグによるツリーデータの再編成
• 検索／フィルター機能：大規模なツリー構造内のノードの検索
• 外観のカスタマイズ：階層ごとのノードのスタイル設定やテンプレートの使用

ナビゲーションガイド

以下から目的のタスクを選択して、関連するリファレンスドキュメントを参照してください。

はじめに

📄 参照先： references/getting-started.md

参照する場面：初めて TreeView をセットアップするとき、パッケージのインストール、モジュールのインポート、基本的なコンポーネントの初期化、CSS のインポート、テーマの選択、最初のツリーの作成。

データバインディングと階層

📄 参照先： references/data-binding.md

参照する場面：データソースを TreeView に接続するとき、階層データや自己参照データをバインドするとき、DataManager の使用、リモート API からのデータの読み込み、遅延読み込み（オンデマンド読み込み）の実装、ツリーデータの動的な更新。

ノードの選択とチェックボックス

📄 参照先： references/node-selection.md

参照する場面：チェックボックスの有効化、チェックボックスの状態（チェック済み／未チェック／三状態）の管理、複数選択と単一選択の実装、選択イベントの使用、選択されたノード ID の取得、チェックボックスの無効化、親チェックボックスの削除。

ノードの編集と操作

📄 参照先： references/node-editing.md

参照する場面：インプレース編集の有効化、プログラムによるノードの追加／削除／更新、編集テキストの検証、ノードの移動、ノード操作メソッド（addNodes、removeNodes、updateNode、moveNodes）の使用。

ドラッグ＆ドロップ

📄 参照先： references/drag-and-drop.md

参照する場面：ドラッグ＆ドロップ機能の有効化、特定ノードへのドロップの制限、ドラッグイベントの処理、ドロップインジケーターのカスタマイズ、無効な操作の防止。

テンプレートとノードのスタイル設定

📄 参照先： references/templating.md

参照する場面：カスタムノードテンプレートの作成、動的アイコンの使用、階層に応じたノードのスタイル設定、展開／折りたたみアイコンのカスタマイズ、ツールチップの表示、複数行ノードの処理、CSS のカスタマイズ。

フィルタリングと並べ替え

📄 参照先： references/filtering-sorting.md

参照する場面：テキストによるノードのフィルタリング、検索機能の実装、全体または階層ごとのノードの並べ替え、ツリーの表示順の整理。

コンテキストメニューとの統合

📄 参照先： references/context-menu.md

参照する場面：ノード操作用のコンテキストメニューの追加、右クリック操作の処理、メニューによる追加／編集／削除の実装、カスタムメニュー項目の作成。

アクセシビリティ、高度な機能、API の移行

📄 参照先： references/accessibility-advanced.md

参照する場面：キーボード操作（矢印キー、Enter、Space）、ARIA 属性とアクセシビリティへの準拠、RTL（右から左）サポート、子ノードの取得、アコーディオン動作、高度なメソッド、EJ1 から EJ2 への移行、パフォーマンスの最適化。

クイックスタートの例

静的な階層データを使用した、最小限の TreeView の実装を以下に示します。

import { Component } from '@angular/core';
import { TreeViewModule } from '@syncfusion/ej2-angular-navigations';
import { FormsModule } from '@angular/forms';

@Component({
  selector: 'app-tree-view',
  standalone: true,
  imports: [FormsModule, TreeViewModule],
  template: `
    <ejs-treeview 
      id="treeView"
      [fields]="treeFields"
      [allowMultiSelection]="true">
    </ejs-treeview>
  `
})
export class TreeViewComponent {
  // Hierarchical data structure
  treeData = [
    {
      id: '01',
      name: 'Documents',
      hasChild: true,
      expanded: true,
      subChild: [
        { id: '01-01', name: 'Work Files' },
        { id: '01-02', name: 'Personal' }
      ]
    },
    {
      id: '02',
      name: 'Downloads',
      hasChild: true,
      subChild: [
        { id: '02-01', name: 'Images' },
        { id: '02-02', name: 'Videos' }
      ]
    }
  ];

  // Field mapping configuration
  treeFields = {
    dataSource: this.treeData,
    id: 'id',
    text: 'name',
    child: 'subChild',
    hasChildren: 'hasChild',
    expanded: 'expanded'
  };
}

主な TreeView メソッド

メソッド	目的
addNodes(nodes, target?, index?, preventTargetExpand?)	指定した位置にノードのコレクションを追加します
removeNodes(nodeIds)	ID を指定してノードを削除します
updateNode(target, newText)	ノードのテキストを置き換えます（allowEditing を有効にする必要があります）
moveNodes(sourceNodes, target, index?, preventTargetExpand?)	ノードを新しい親ノードとインデックス位置に移動します
getTreeData(nodeId?)	ツリーデータ全体、または特定のノードデータを取得します
getAllCheckedNodes()	読み込み済みかどうかにかかわらず、子ノードを含むチェック済みの全ノード ID を取得します
checkAll(nodes?)	すべてのノード、または指定したノードをチェックします
uncheckAll(nodes?)	すべてのノード、または指定したノードのチェックを外します
beginEdit(nodeId)	ノードの編集を開始します
expandAll(nodes?, level?, excludeHiddenNodes?, preventAnimation?)	すべてのノード、または指定したノードを展開します。レベルの指定も可能です
collapseAll(nodes?, level?, excludeHiddenNodes?)	すべてのノード、または指定したノードを折りたたみます。レベルの指定も可能です
ensureVisible(nodeId)	ノードが表示されるようにスクロールします
disableNodes(nodeIds)	指定したノードを無効にします
enableNodes(nodeIds)	指定したノードを有効にします
getNode(nodeId)	ノードの HTML 要素を取得します
destroy()	TreeView コンポーネントを破棄します

主な TreeView イベント

イベント	発生するタイミング
created	TreeView コンポーネントが作成されたとき
dataBound	データソースのバインドが完了したとき
dataSourceChanged	ツリーデータが変更されたとき（追加／削除／更新）
nodeClicked	ユーザーがノードをクリックしたとき
nodeSelected	ノードが選択されたとき
nodeSelecting	ノードが選択される前（選択をキャンセルできます）
nodeChecked	チェックボックスの状態が変化したとき
nodeChecking	チェックボックスの状態が変化する前（変更をキャンセルできます）
nodeExpanding	ノードが展開される前
nodeExpanded	ノードが展開されたとき
nodeCollapsing	ノードが折りたたまれる前
nodeCollapsed	ノードが折りたたまれたとき
nodeEditing	ノードのテキストが編集される前
nodeEdited	ノードのテキストが編集された後
nodeDragStart	ドラッグ操作が開始されたとき
nodeDragging	ノードをドラッグしているとき
nodeDragStop	ドロップ前にドラッグが終了したとき
nodeDropped	ノードが正常にドロップされたとき
drawNode	各ノードの描画前（外観をカスタマイズできます）
keyPress	ユーザーがキーボードのキーを押したとき
destroyed	TreeView コンポーネントが破棄されたとき

よくあるパターン

パターン 1：チェックボックスによる選択

階層に応じたチェックボックスの状態で、複数選択できるようにします。

treeFields = {
  dataSource: this.treeData,
  id: 'id',
  text: 'name',
  child: 'subChild',
  hasChildren: 'hasChild'
};

showCheckBox = true;  // Enable checkboxes
autoCheck = true;     // Parent/child auto-check

パターン 2：ドラッグ＆ドロップ対応のファイルブラウザー

ノードを並べ替えられるインタラクティブなファイルブラウザーを作成します。

<ejs-treeview 
  [fields]="treeFields"
  [allowDragAndDrop]="true"
  [allowMultiSelection]="true"
  (nodeDragging)="onNodeDragging($event)"
  (nodeDropped)="onNodeDropped($event)">
</ejs-treeview>

パターン 3：検索とフィルター

ツリーノードをリアルタイムでフィルタリングします。

<input 
  type="text" 
  (keyup)="filterTree($event.target.value)" 
  placeholder="Search nodes...">

<ejs-treeview 
  #treeView
  [fields]="filteredFields">
</ejs-treeview>

パターン 4：編集可能なツリー

検証機能を備えた、ノードのインライン編集を有効にします。

<ejs-treeview 
  [fields]="treeFields"
  [allowEditing]="true"
  (nodeEditing)="onNodeEditing($event)"
  (nodeEdited)="onNodeEdited($event)">
</ejs-treeview>

TreeView の主なプロパティ

プロパティ	型	目的
fields	Object	データソースのマッピングを設定します（id、text、child、parentID、hasChildren、expanded、isChecked など）
dataSource	Array	階層型またはフラットなデータ配列
allowMultiSelection	Boolean	複数ノードの選択を有効にします
showCheckBox	Boolean	ノードの前にチェックボックスを表示します
autoCheck	Boolean	親がチェックされたときに子ノードも自動的にチェックします（デフォルト：true）
allowDragAndDrop	Boolean	ドラッグ＆ドロップ機能を有効にします
allowEditing	Boolean	ノードのインプレース編集を有効にします
loadOnDemand	Boolean	親を展開したときにのみ子ノードを読み込みます（デフォルト：true）
sortOrder	String	並べ替え順：「Ascending」、「Descending」、または「None」
cssClass	String	スタイル設定にカスタム CSS クラスを適用します
enableRtl	Boolean	右から左へのレイアウトを有効にします
enablePersistence	Boolean	TreeView の状態（展開されたノード、選択状態）を保存して復元します
checkedNodes	Array	チェック状態にするノード ID の配列
selectedNodes	Array	選択状態にするノード ID の配列
nodeTemplate	Template	ノードを描画するカスタムテンプレート
animation	Object	展開／折りたたみのアニメーションを設定します
allowKeyboardNavigation	Boolean	キーボードナビゲーションを有効にします（デフォルト：true）

一般的なユースケース

組織図：親子関係を持つ従業員の階層を表示し、役職を示すカスタムテンプレートを使用します。

ファイル／フォルダーブラウザー：ディレクトリ構造を表示し、ドラッグ＆ドロップでフォルダー間のファイル移動を可能にします。

カテゴリーナビゲーション：絞り込みと複数選択にチェックボックスを使用して、多階層の商品カテゴリーを表示します。

設定メニュー：トピックごとに整理された階層型の設定項目や構成オプションを表示します。

ナレッジベース：検索と展開／折りたたみナビゲーションに対応した、入れ子構造のドキュメントトピックを表示します。

参考ファイル

• getting-started.md - インストール、セットアップ、基本的な初期化
• data-binding.md - データソース、階層構造、リモートデータ、遅延読み込み
• node-selection.md - チェックボックス、複数選択、選択イベント
• node-editing.md - ノードの編集、追加、削除、更新
• drag-and-drop.md - ドラッグ＆ドロップの設定と制限
• templating.md - カスタムテンプレート、アイコン、スタイル設定、ツールチップ
• filtering-sorting.md - フィルター、検索、並べ替え機能
• context-menu.md - コンテキストメニューの統合とノード操作
• accessibility-advanced.md - キーボードナビゲーション、ARIA、RTL、高度なメソッド

---

次のステップ：

1. 上記のナビゲーションガイドからユースケースを選択します
2. 該当する参考ファイルを読みます
3. コード例をデータ構造に合わせて調整します
4. データソースを使用してテストします