syncfusion-vue-treegrid

Syncfusion Vue TreeGrid の実装

Syncfusion Vue TreeGrid は、グリッド機能を備えたツリー状の構造で階層データを表示するための強力なデータ可視化コンポーネントです。並べ替え、フィルタリング、編集、エクスポート、高度なデータ管理の機能を提供します。

⚠️ セキュリティと信頼境界

• TreeGrid スキルはリモートデータアクセスを行いません。
• すべての外部 API とのやり取りは、このスキルの信頼境界外にある別の DataManager スキルが処理します。

目次

• このスキルを使用する場面
• Vue 3 のセットアップ
• Vue 2 のセットアップ
• API リファレンス
• データ構造とバインディング
• 列と設定
• 固定列と固定行
• 行の管理と機能
• データ操作
• スクロールと大規模データの処理
• 編集と検証
• ツールバーとコマンド
• エクスポートとレポート
• パフォーマンスと表示
• 外観と操作
• 高度な機能と設定
• モジュール
• クイックスタートの例
• 一般的なパターン

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

次のような場合に、このスキルを使用します。

• Vue アプリケーションで階層データやツリー構造のデータを表示する
• データの編集、並べ替え、フィルタリング、検索機能を実装する
• データを Excel または PDF 形式でエクスポートする
• 高度な機能を備えたレスポンシブなデータテーブルを作成する
• 仮想スクロールやページネーションを使用して大規模なデータセットを処理する
• 行選択、セルテンプレート、カスタムスタイルを実装する
• キーボード操作、ドラッグ＆ドロップ、コンテキストメニューを追加する
• 複雑なデータシナリオに合わせてパフォーマンスを微調整する

Vue 3 のセットアップ

📄 お読みください references/getting-started-vue3.md

• Vue 3 のインストールとパッケージのセットアップ
• Composition API のセットアップ
• Vue 3 でのデータバインディング
• ツリー構造の概念

Vue 2 のセットアップ

📄 お読みください references/getting-started-vue2.md

• Vue 2 のインストールとパッケージのセットアップ
• TreeGrid の基本設定
• データバインディングの基礎
• ツリー構造の概念

API リファレンス

TreeGrid のすべてのプロパティ、メソッド、イベントに関する完全な API ドキュメントです。

📄 プロパティ： references/properties.md

• TreeGrid の設定プロパティ
• オプションの型とデフォルト値

📄 メソッド： references/methods.md

• プログラムによる操作に使用する TreeGrid のメソッド
• メソッドのシグネチャとパラメーター

📄 イベント： references/events.md

• TreeGrid のイベントとイベントハンドラー
• イベントの発生ポイント

データ構造とバインディング

📄 お読みください： references/data-handling.md

• ローカルおよびリモートのデータソースのバインディング
• ドット表記を使用した複雑なデータのバインディング
• 動的なデータ更新と状態の永続化
• 階層データ構造のセットアップ

列と設定

📄 お読みください： references/columns.md

• 列の定義とプロパティ
• 列の書式設定とカスタムヘッダー
• ヘッダーとカスタムヘッダーテンプレート

列の機能

📄 参照： references/column-resizing.md

• 列のサイズ変更方法と設定
• 最小幅と最大幅の制約
• 自動調整モードと手動サイズ変更モード

📄 参照： references/column-reorder.md

• 列の並べ替えとドラッグ＆ドロップの設定
• 並べ替えイベントと状態の永続化
• プログラムによる並べ替えメソッド

📄 参照： references/column-spanning.md

• 結合セルの列スパン設定
• スパンのルールと制約
• 複雑なスパンのシナリオ

📄 参照： references/column-menu.md

• 列メニューの設定とカスタマイズ
• 列メニューからのメニュー項目とフィルタリング
• 列メニューのイベント

📄 参照： references/column-chooser.md

• 列の表示／非表示を切り替える列選択機能
• 列選択機能の設定とスタイル
• プログラムによる列の表示制御

固定列と固定行

📄 参照： references/frozen-rows-and-columns.md

• 固定列の設定
• 固定行の設定
• 左側と右側の固定
• 固定列と固定行を使用したスクロール

行の管理と機能

📄 参照： references/row.md

• 展開時のコンテンツに使う行詳細テンプレート
• 行のインデント制御
• 行のスタイルとテンプレート

📄 参照： references/selection.md

• セルと行の選択モード
• チェックボックス選択の設定
• 選択イベントと状態管理
• プログラムによる選択メソッド

データ操作

並べ替え

📄 参照： references/sorting.md

• 単一列と複数列の並べ替え
• 並べ替え方向と初期並べ替えの設定
• 並べ替えメソッドとプログラムによる並べ替え
• 並べ替えイベントの処理

検索

📄 参照： references/searching.md

• 列単位の検索
• すべての列を対象とするグローバル検索
• リアルタイム検索フィルタリング
• 検索メソッドとオプション

フィルタリング

📄 参照： references/filtering.md

• フィルターバー、フィルターメニュー、Excel 風フィルター
• フィルターの設定とテンプレート
• カスタム述語による高度なフィルタリング
• プログラムによるフィルタリングメソッド

集計

📄 参照： references/aggregation.md

• 集計タイプ（合計、平均、件数、最小、最大）
• フッターの集計値とカスタム集計テンプレート
• 列ごとの集計設定
• 集計値の動的な更新

ページング

📄 参照： references/paging.md

• ページングのセットアップと設定
• ページサイズのモード（すべて／ルートレベル）
• プログラムによるページ移動
• ページャーのカスタマイズ

スクロールと大量データの処理

仮想スクロール

📄 参照： references/virtual-scrolling.md

• 仮想スクロールのアーキテクチャとパフォーマンス
• 行の高さとバッファーの設定
• 動的な行の高さの処理
• 仮想スクロールによるメモリ最適化

無限スクロール

📄 参照： references/infinite-scrolling.md

• 大規模データセット向けの無限スクロール読み込み
• 読み込みイベントとデータ取得
• リアルタイムの読み込みインジケーター
• メモリ管理のパターン

編集と検証

📄 参照： references/editing.md

• インライン編集、ダイアログ編集、バッチ編集の各モード
• セル編集と行編集のワークフロー
• アクションボタン付きのコマンド列
• 編集イベントの処理とカスタムバリデーター

📄 参照： references/validation.md

• 編集時の検証ルールとパターン
• カスタムバリデーターとエラー処理
• 検証の実行タイミング（フォーカスを外したとき、送信時など）
• サーバー側の検証との統合

ツールバーとコマンド

📄 参照: references/toolbar.md

• 組み込みのツールバー項目（追加、編集、削除、エクスポート）
• カスタムツールバーボタンとアクション
• ツールバーテンプレートとスタイル設定
• ツールバーからの検索とフィルタリング
• ツールバーのイベントと操作

エクスポートとレポート

Excel エクスポート

📄 参照: references/excel-export.md

• Excel エクスポート機能と設定
• Excel エクスポートのヘッダーとフッター
• セルスタイルのカスタマイズ
• サーバーサイドのエクスポートオプション

PDF エクスポート

📄 参照: references/pdf-export.md

• PDF エクスポート機能と設定
• PDF エクスポートのヘッダーとフッター
• ページの向きとカスタムスタイル設定
• サーバーサイドのエクスポートオプション

パフォーマンスと表示

📄 参照: references/immutable.md

• イミュータブルデータの処理パターン
• イミュータブルデータによる変更検出
• イミュータブルモードのパフォーマンス上のメリット
• 実装方法

📄 参照: references/scrolling.md

• 大規模データセット向けの仮想スクロール
• 無限スクロールによる読み込み
• 水平および垂直スクロール
• 列と行の固定

外観と操作

📄 参照: references/styling-and-appearance.md

• CSS のカスタマイズとスタイル設定
• テーマモードとレスポンシブデザイン
• アダプティブ UI のレンダリング
• セルの機能（折り返し、クリッピング、配置）

📄 参照: references/adaptive.md

• アダプティブ UI の動作
• レスポンシブデザインのパターン
• モバイルに適した設定

📄 参照: references/cell.md

• セルのプロパティと設定
• セルテンプレートとスタイル設定
• セルの操作と編集

📄 参照: references/keyboard-navigation.md

• キーボードショートカットとナビゲーションパターン
• カスタムキーボードハンドラー
• アクセシビリティに関する考慮事項
• セルと行間の移動

📄 参照: references/context-menu.md

• コンテキストメニューの設定
• カスタムメニュー項目とアクション
• メニューイベントの処理

📄 参照: references/clipboard.md

• コピー／貼り付け操作
• クリップボードの設定
• データ転送の処理

高度な機能と設定

📄 参照: references/print.md

• 印刷機能
• ページレイアウトと向き
• 印刷スタイルの設定とカスタマイズ

📄 参照: references/loading-animation.md

• ローディングアニメーションの設定
• 状態インジケーターと視覚的なフィードバック
• カスタムローディングテンプレート

📄 参照: references/localization.md

• ローカライズと国際化
• 言語設定
• UI テキストの翻訳

状態の永続化

📄 参照: references/state-persistence.md

• グリッド状態（列、並べ替え、フィルタリング、選択）の永続化
• ローカルストレージとセッションストレージのオプション
• ページ再読み込み時の状態復元
• 状態管理のベストプラクティス

モジュール

📄 参照: references/modules.md

• モジュールのインジェクションと依存関係の解決
• 利用可能なモジュール（並べ替え、フィルター、ページ、編集など）
• Tree Grid 固有のモジュール
• モジュール選択によるパフォーマンスへの影響

クイックスタートの例

<template>
  <ejs-treegrid :dataSource="data" :columns="columns" :treeColumnIndex="0" 
    :allowPaging="true" :pageSettings="pageSettings" :allowSorting="true">
  </ejs-treegrid>
</template>

<script setup>
import { ej2grid } from '@syncfusion/ej2-vue-grids';
import { provide } from 'vue';
import { TreeGridComponent as EjsTreegrid, Inject, Page, Sort } from '@syncfusion/ej2-vue-treegrid';

const data = [
  { TaskID: 1, TaskName: 'Planning', Duration: 10 },
  { TaskID: 2, TaskName: 'Design', Duration: 5 },
];

const columns = [
  { field: 'TaskID', headerText: 'Task ID', width: 90 },
  { field: 'TaskName', headerText: 'Task Name', width: 150 },
  { field: 'Duration', headerText: 'Duration', width: 100 },
];

const pageSettings = { pageSize: 10 };

provide('treegrid', [Page, Sort]);
</script>

完全な実例については、こちらをご覧ください： ../code-snippet/treegrid/

よくあるパターン

パターン 1：検証機能付きの編集可能なデータグリッド

1. allowEditing で編集を有効にします
2. 編集モード（インラインまたはダイアログ）を設定します
3. editSettings を設定します
4. Edit モジュールを指定して Inject を追加します
5. 参照先：code-snippet/treegrid/editing/

パターン 2：フィルタリングと並べ替えが可能なリスト

1. allowFiltering でフィルタリングを有効にします
2. allowSorting で並べ替えを有効にします
3. フィルター設定を構成します
4. 参照先：code-snippet/treegrid/filtering/、code-snippet/treegrid/sorting/

パターン 3：ページ分割された大規模データセット

1. allowPaging でページ分割を有効にします
2. pageSettings でページサイズを設定します
3. リモートデータソースにバインドします
4. 参照：code-snippet/treegrid/paging/、code-snippet/treegrid/data-binding/

パターン 4：Excel レポートのエクスポート

1. TreeGrid にデータを設定します
2. excelExport() メソッドを呼び出します
3. ヘッダー、フッター、スタイルをカスタマイズします
4. 参照：code-snippet/treegrid/excel/

パターン 5：高度な選択

1. 選択モード（行、セル、またはチェックボックス）を設定します
2. チェックボックスの選択列を設定します
3. 選択イベントを処理します
4. 参照：code-snippet/treegrid/selection/