Angular TreeGrid - 強力なツリーリストコンポーネント
- オンデマンドで子データを動的に読み込み、大量のデータを読み込みます。
- 親レコードの展開・折りたたみ、ダイアログ編集など、UI相互作用を含めます。
- Fabricなどの組み込みテーマで魅力的なUI外観を構築します。
Quick Overview Video
Trusted by the world’s leading companies
概要
Angular TreeGridは、自己参照的で階層的なデータを表形式（ツリー状の構造）で効果的に可視化するための機能豊富なコントロールです。その豊富な機能セットには、データバインディング、仮想化、編集、ソート、検索、フィルタリング、無限スクロール、ページング、行と列の固定、複数の形式へのエクスポート、行の集約などの多くの機能が含まれています。
Syncfusion® Angular TreeGridを選ぶ理由
高性能
データを階層的に表示します。このコンポーネントの最適化された設計により、わずか数秒で数百万のレコードを読み込む高性能を実現します。
シームレスなデータバインディング
JSONやOData、WCF、RESTful Webサービスなどの様々なローカルおよびリモートデータソースとデータマネージャーの助けを借りてシームレスにデータをバインドします。
自己参照的な階層型グリッド
Angular TreeGridは、自己参照的で階層的なデータを表形式で可視化するように設計されています。親レコードと子レコード間の関係を表示します。
柔軟な編集
Angular TreeGridは、監視可能なデータを使用して作成、読み取り、更新、削除操作（CRUD）を実行します。JSONの配列またはデータマネージャーを使用したリモートデータサービスで編集します。
あらゆる解像度に適応します
TreeGridは、高度にレスポンシブなレイアウトとデスクトップ、タッチスクリーン、スマートフォン向けに最適化された設計を備えています。iOS、Android、またはWindows OSを使用するすべてのモバイルフォンで正常に動作します。
独自のテンプレート設計を作成します
テンプレートを使用して、ユーザーは広範なテンプレートオプションを使用してAngular TreeGridでカスタムUIを作成できます。
魅力的でカスタマイズ可能なテーマ
Fluent、Tailwind CSS、Bootstrap、Material、Fabricなどの組み込みテーマによる最先端の設計。オンラインTheme Studioツールを活用して、Angular TreeGridのテーマを簡単にカスタマイズできます。
グローバリゼーションとローカライゼーション
異なるロケールのユーザーは、日付、通貨、番号付けを自分の好みに合わせてフォーマットすることでTreeGridを使用できます。
Angular TreeGridコード例
以下で示すように、HTMLおよびTSコードのわずか数行でAngular TreeGrid（Tree Table）を簡単に始められます。また、Angular内でTreeGridをレンダリングおよび構成する方法を示すAngular TreeGridの例も参照してください。
<ejs-treegrid [dataSource]='data' [treeColumnIndex]='1' height='350' childMapping='subtasks'>
<e-columns>
<e-column field='taskID' headerText='Task ID' textAlign='Right' width=90></e-column>
<e-column field='taskName' headerText='Task Name' textAlign='Left' width=180></e-column>
<e-column field='startDate' headerText='Start Date' textAlign='Right' format='yMd' width=90><e-column>
<e-column field='duration' headerText='Duration' textAlign='Right' width=80></e-column>
</e-columns>
</ejs-treegrid>import { Component, OnInit } from '@angular/core';
import { sampleData } from './datasource';
@Component({
selector: 'ej2-treegrid-container',
templateUrl: 'default.html'
})
export class DefaultComponent implements OnInit {
public data: Object[] = [];
ngOnInit(): void {
this.data = sampleData;
}
}スケルトンローディング表示
TreeGridは、初期レンダリング、更新、またはソートなどのグリッドアクション後にデータを取得してツリーグリッドにバインドする際のローディングインジケーターとして効果を表示します。TreeGridは2つのタイプの効果を提供します：スピナーとシマー。
列
列は、Angular TreeGrid内のデータソースのスキーマを定義します。機能には、フォーマット、列定義、テキスト折り返し、列チューザー、列メニュー、列の並べ替えが含まれます。
ページング
ページングを通じて、割り当てられたデータソースから一部のデータを表示できます。Angular TreeGridには、UI全体をカスタマイズするオプション付きの組み込みペーージャーUIがあります。また、リモートWebサービスからの効果的なデータ取得のためのオンデマンドページングモードもあります。
ソート
Angular TreeGridを使用すると、ユーザーはヘッダーをクリックするだけで列をソートできます。Ctrl+ヘッダークリックで複数ソートを実行します。昇順または降順でデータをソートします。
フィルタリング
フィルタリングは、特定の関連レコードまたは与えられたフィルタリング条件を満たすレコードを表示するのに役立ちます。このコンポーネントは、強力なExcelのようなフィルターを含む様々なフィルタータイプをサポートしています。Angular TreeGridのフィルターを使用すると、ユーザーは適切なフィルタータイプを選択し、独自のカスタムフィルタリングロジックを定義し、アプリケーションのニーズに基づいてフィルタリングUIをカスタマイズできます。親または子レコードに関連するフィルタリングを定義できます。
選択
Angular TreeGridでは、行またはセルを選択できます。CtrlまたはCommandキーを押しながら、または以下の方法でプログラム的に1つ以上の行またはセルを選択することもできます。
編集
Angular TreeGridは、作成、読み取り、更新、削除操作（CRUD）に完全にサポートを提供します。特定の列値を編集するための組み込みエディターコンポーネントに加えて、テンプレートサポートを使用すると、ユーザーはカスタムエディターコンポーネントを作成できます。TreeGridは、JSON集合またはデータマネージャーの助けを借りたリモートデータサービスで編集操作を実行します。
行のドラッグアンドドロップ
Angular TreeGridを使用すると、ユーザーは同じまたは別のツリーグリッド内で行をドラッグアンドドロップできます。この機能は、データの再構成と直感的なユーザーエクスペリエンスの作成に特に役立ちます。
固定列
固定列はAngular TreeGridの左, 右、または両側に表示され、残りのグリッドコンテンツをスクロール可能にします。これらは主にセル値を比較するために使用されます。
カスタムツールチップ
Angular TreeGridコンポーネントでは、ツリーグリッドセルのツールチップを設定できます。ツリーノードの上にマウスを移動してツールチップテキストを表示します。
スティッキーヘッダー
データをスクロールする際に列ヘッダーを常に表示に保ちます。スティッキーヘッダーは継続的なコンテキストを提供し、大きなデータセットの解釈と分析が容易になります。
Exporting
Excel、PDF、CSVエクスポート
Easily export the HTML5 tree grid control in Excel, PDF, or CSV file formats. Users can also programmatically customize the exported document.
印刷
ユーザーはツールバーから印刷オプションを使用するか、プログラムで印刷できます。ページ数に関係なくAngular TreeGridのすべての行を印刷するか、現在表示されているページのみを印刷します。
追加機能
行の高さ
行の高さは、ビューポート内にレコードを表示する際の主要な要因であり、アプリケーションのUI要件に基づいてカスタマイズできます。また、行の高さを条件付きで設定することも可能です。
クリップボードにコピー
クリップボードは, 選択した行またはセルのデータをクリップボードにコピーするオプションを提供します。Ctrl+CおよびCtrl+Shift+Hキーの組み合わせを使用して、それぞれヘッダー付きおよびヘッダーなしでデータをコピーします。
コンテキストメニュー
コンテキストメニューは, ポップアップメニューを使用してAngular TreeGridとのユーザー相互作用を改善します。セル、ヘッダー、またはペーページャーを右クリックすると表示されます。組み込みの既定メニュー項目に加えて、カスタムコンテキストメニュー項目を追加できます。
幅と高さ
幅と高さプロパティを設定することで、Angular TreeGridのサイズを変更します。コンテンツがAngular TreeGrid要素をオーバーフローすると、水平スクロールバーと垂直スクロールバーが表示されます。Angular TreeGridが親コンテナーを満たすには、ユーザーは単に高さと幅を100%に設定する必要があります。
スタックされたヘッダー
スタックされたヘッダーにより, 列ヘッダーをスタック方式でグループ化および可視化できます。スタックできる列の数に制限はありません。ユーザーは、列がスタックされている場合でも、すべてのAngular TreeGrid操作を実行できます。
アクセシビリティ
キーボードナビゲーション
TreeGridでは, すべてのセルがキーボードアクセス可能であることを保証します。子行の展開または折りたたみ、ソート、選択、編集などの主要機能は、キーボードコマンドのみを使用して実行でき、マウス操作は不要です。これにより、このコンポーネントを使用して高度にアクセス可能なアプリケーションを作成するのに役立ちます。
スクリーンリーダー
Angular TreeGridは、完全なWAI-ARIAアクセシビリティサポートを備えています。UIには、視覚障害者に最高の視聴体験を提供するために役立つハイコントラスト視覚要素が含まれています。また、有効なUI説明は、スクリーンリーダーなどの支援技術を通じて簡単にアクセスできます。
右から左（RTL）
右から左へのレンダリングにより、ユーザーはAngular TreeGridのテキストとレイアウトを右から左に表示できます。これにより、RTL言語のユーザーエクスペリエンスとアクセシビリティが向上します。
Angular バージョン互換性
Angular TreeGridは、バージョン4から最新バージョンまで、Angular バージョンと互換性を保つように更新されています。
Other supported frameworks
TreeGridは、Blazor、React、JavaScript、Vue フレームワークで利用できます。次のリンクを介してプラットフォーム固有のオプションを探索してください：
サポートされているブラウザー
Angular TreeGridは、Chrome、Firefox、Edge, Safari、Opera を含むすべての最新Webブラウザーで正常に動作します。
150+ 以上のAngular UIコンポーネント
すべてのコンポーネント
スマートコンポーネント
データ可視化
ドロップダウン
ファイルビューア & エディタ
ボタン
インタラクティブチャット
入力
ナビゲーション
フォーム
よくある質問
Syncfusion® Angular TreeGridを選ぶべき理由は何ですか？
ユーザーはオンデマンドで子データを読み込むことで、大量のデータを動的に読み込むことができます。
親レコードの展開と折りたたみ, ダイアログ編集などのUI相互作用を含めます。
JSON、RESTful サービス、OData サービス、WCF サービスなどのローカルおよびリモート データ ソースの使用をサポートする、柔軟なデータ バインディング。
- Fabric や Bootstrap などの組み込みテーマを備えた魅力的な UI外観。
- シンプルな構成と API。
- すべての最新ブラウザーをサポート。
- タッチフレンドリーでレスポンシブな UI。
デモ、ドキュメンテーション、ビデオなどの豊富な学習リソースにより、ユーザーはAngular TreeGridをすぐに始めることができます。
Syncfusion® Angular TreeGrid デモはどこにありますか？
Angular Tree Grid デモを見つけることができます。これはTreeGridをレンダリングおよび構成する方法を示しています。
Syncfusion® Angular TreeGridを無料でダウンロードして使用できますか？
いいえ、これは商用製品であり、有料ライセンスが必要です。ただし, 年間総収益が100万米ドル未満で、開発者が5人以下の企業や個人を対象とした無料コミュニティ ライセンスも利用できます。
Syncfusion® Angular TreeGridを使い始めるにはどうすればよいですか？
手始めに, 当社の包括的なスタート ガイド ドキュメンテーションをお勧めします。
お客様は私たちを愛しています
優れたツール群と充実したサポートチームにより、Syncfusion® はお客様の開発時間を短縮します。お客様の体験談の一部をご紹介します。
An amazing toolset to accelerate UI development
The number of components available is the best thing about this library. We think of a UI component, and the Angular JS library already offers it. We use the Angular JS library to accelerate development. The experience using and implementing has been great. The support is also excellent.
Shrikant P
Customer Success Manager
A giant framework with great pricing options
I have loved the components and options that Syncfusion has, besides, its documentation, demos, and Support are excellent.
Alejandro Javier V
CEO
実際の成功事例を見る
世界中の開発者が複雑なプロジェクトを簡素化し、納期を短縮するために Syncfusion の Essential Studio を信頼しています。豊富な UI コントロール ライブラリ、強力な SDK、信頼できるサポートにより、Essential Studio はチームがエンタープライズ対応のアプリケーションを自信を持って構築できるよう支援します。
ケーススタディを探る産業
ソフトウェア開発
75% コスト削減
50% より迅速な開発
産業
公益事業 (石油・ガス)
450+ 節約された時間
プロセスを合理化し、開発工数を大幅に削減
高度で柔軟な機能
強力で多用途な機能によりユーザーを支援
産業
ソフトウェアと技術
1000+ 節約された時間
エンタープライズ対応の UI コンポーネントで開発を加速
効率的なファイル管理
ドキュメント ライブラリにより、ゼロから構築することなくワークフローを合理化
産業
ソフトウェアと技術
2年 回避された遅延
プロアクティブな計画により 2 年間の遅延を防止
予定どおりの納品
信頼性の高いコントロールを使用してプロジェクトを期日どおりに納品
産業
ITサービスとITコンサルティング
パフォーマンスの向上
大規模データセットを簡単なカスタマイズと迅速なデバッグで処理
高いカスタマイズ性
プラグアンドプレイ方式のコントロールによりテンプレートを素早く統合
産業
プロフェッショナルサービス
即時アクセス
機能とリソースをすぐに利用可能
依存関係の削減
開発を高速化するための依存関係を最小限に
世界中のユーザーからの評価
Syncfusion® Angular TreeGridリソース
UIキット
Figma ダウンロード
Figma ダウンロード
受賞歴
偉大さ—自分で言うのではなく、他の人が認めるからこそ意味があります。 シンクフュージョンは以下の賞をいただきました。
