Angular ツリー グリッド 概要と構成

    Ignite UI for Angular Tree Grid は、階層データまたはフラットデータを簡単に表示および操作できます。最小限のコードでデータをすばやくバインドするか、さまざまなイベントを使用してさまざまな動作をカスタマイズします。このコンポーネントは、データ選択、Excel スタイル フィルタリング、ソート、ページング、テンプレート、列移動などの豊富な機能を提供します。Material Table ベースの UI ツリー グリッドにより、表形式のデータの表示がさらに簡単できれいになりました。

    Angular ツリー グリッドの例

    この例では、ユーザーが階層データまたはフラット データを操作する方法を確認できます。フィルタリングとソートのオプション、ピン固定と非表示、行の選択、Excel と csv へのエクスポート、スパークラインコンポーネントを使用したセル テンプレートが含まれています。さらに、Angular 改ページを使用したカスタム改ページの例を見ることができます。

    Ignite UI for Angular Tree Grid で作業を開始

    ツリー グリッドを初期化するには、以下のコマンドを実行して Ignite UI for Angular をインストールする必要があります。

    ng add igniteui-angular
    

    Ignite UI for Angular については、はじめにトピックををご覧ください。

    ツリー グリッドが NgModule としてエクスポートされるため、アプリケーションで AppModuleIgxTreeGridModule をインポートする必要があります。

    // app.module.ts
    
    import { IgxTreeGridModule } from 'igniteui-angular';
    
    @NgModule({
        imports: [
            ...
            IgxTreeGridModule,
            ...
        ]
    })
    export class AppModule {}
    

    使用方法

    Note

    このコンポーネントでは、タッチ操作が正しく動作するために、アプリケーションのルート モジュールに HammerModule をインポートする必要があります。.

    IgxTreeGridComponentIgxGridComponent と多数の機能を共有しますが、データを階層で表示する機能も追加されています。 IgxTreeGridComponent は、各データオブジェクトの子コレクションまたは各データオブジェクトにプライマリキーまたは外部キーを使用してデータ オブジェクト内の関係を定義できます。

    ツリー セル

    ツリー グリッド階層の構築に使用するオプション (子コレクションまたは主キーまたは外部キー) にかかわらず、ツリー グリッドの行は 2 タイプのセルで構成されます。

    • IgxGridCell - 値を含む標準セル。
    • IgxGridCell - セル行のレベルに基づいた値、インジケーターの展開/縮小、インデント div 要素を含むツリー セル。インナー treeRowlevel プロパティでアクセスできる行コンポーネント レベル。
    Note

    各行にはツリー セルを 1 つのみ含むことができますが、標準セルは複数含むことが可能です。

    初期展開時の深さ

    初期時のツリーグリッドは、すべてのノード レベルを展開して表示します。この動作は、expansionDepth プロパティを使用して設定できます。デフォルトの値は Infinity ですべてのノードが展開されます。初期時の展開の深さは、このプロパティを数値に設定して制御できます。たとえば、0 はルート レベルのノードのみを表示し、1 はルートレベルと子ノードを表示します。

    子コレクション

    child collection オプションを使用して各データ オブジェクトは子コレクションを含み、親データ オブジェクトとして同じタイプの項目で生成します。これによりツリー グリッドの各レコードがその子への直接の参照を持つことができます。元のデータソースを含むツリー グリッドの data プロパティが階層が定義されたコレクションになります。

    このサンプルでは、コレクション ストラクチャを使用します。

    // Sample Employee Data
    
    export const EMPLOYEE_DATA = [
        {
            Name: "Johnathan Winchester",
            ID: 1,
            HireDate: new Date(2008, 3, 20),
            Age: 55,
            Employees: [
                {
                    Name: "Michael Burke",
                    ID: 3,
                    HireDate: new Date(2011, 6, 3),
                    Age: 43,
                    Employees: []
                },
                {
                    Name: "Thomas Anderson"
                    ID: 2,
                    HireDate: new Date(2009, 6, 19),
                    Age: 29,
                    Employees: []
                },
                ...
            ]
        },
        ...
    ]
    

    データ コレクションをインポートしてツリーグリッドの data 入力にバインドします。

    <!--treeGridSample.component.html-->
    
    <igx-tree-grid #treeGrid [data]="localData">
    </igx-tree-grid>
    

    IgxTreeGridComponent を階層にバインドするには、childDataKey プロパティを各データ オブジェクトで使用される子コレクションの名前に設定します。このサンプルでは Employees コレクションです。 更に自動列生成を無効にしてデータ オブジェクトの実際のプロパティとの一致を手動で定義します。Employees コレクションが階層で自動的に使用されるため、列定義に含める必要はありません。

    <!--treeGridSample.component.html-->
    
    <igx-tree-grid #treeGrid [data]="localData" childDataKey="Employees"
                   [autoGenerate]="false">
        <igx-column field="Name" dataType="string"></igx-column>
        <igx-column field="HireDate" dataType="date"></igx-column>
        <igx-column field="Age" dataType="number"></igx-column>
    </igx-tree-grid>
    

    rowSelectablepaging を使用してツリー グリッドの行選択とページング機能を有効にします。 最初の列に集計機能、各列にはフィルタリング、ソート、編集、サイズ変更機能を有効にします。

    <!--treeGridSample.component.html-->
    
    <igx-tree-grid #treeGrid [data]="localData" childDataKey="Employees"
                   [autoGenerate]="false" [rowSelectable]="true" [allowFiltering]="true">
        <igx-column field="Name" dataType="string" [sortable]="true" [editable]="true" [movable]="true" [resizable]="true"
                    [hasSummary]="true"></igx-column>
        <igx-column field="HireDate" dataType="date" [sortable]="true" [editable]="true" [movable]="true" [resizable]="true"></igx-column>
        <igx-column field="Age" dataType="number" [sortable]="true" [editable]="true" [movable]="true" [resizable]="true"></igx-column>
        <igx-paginator>
        </igx-paginator>
    </igx-tree-grid>
    

    最後に IgxGridToolbarComponentIgxGridToolbarHidingComponentIgxGridToolbarPinningComponent および IgxGridToolbarExporterComponent を個別に使用して、列非表示、列ピン固定、エクスポートの機能を含むツリー グリッドのツールバーを有効にします。

    <!--treeGridSample.component.html-->
    
    <igx-tree-grid #treeGrid [data]="localData" childDataKey="Employees"
                   [autoGenerate]="false" [rowSelectable]="true" [allowFiltering]="true">
        <igx-grid-toolbar>
                <igx-grid-toolbar-title>Employees</igx-grid-toolbar-title>
                <igx-grid-toolbar-actions>
                    <igx-grid-toolbar-hiding></igx-grid-toolbar-hiding>
                    <igx-grid-toolbar-pinning></igx-grid-toolbar-pinning>
                    <igx-grid-toolbar-exporter></igx-grid-toolbar-exporter>
                </igx-grid-toolbar-actions>
        </igx-grid-toolbar>
        <igx-column field="Name" dataType="string" [sortable]="true" [editable]="true" [movable]="true" [resizable]="true"></igx-column>
        <igx-column field="HireDate" dataType="date" [sortable]="true" [editable]="true" [movable]="true" [resizable]="true"></igx-column>
        <igx-column field="Age" dataType="number" [sortable]="true" [editable]="true" [movable]="true" [resizable]="true"></igx-column>
        <igx-paginator [perPage]="6">
        </igx-paginator>
    </igx-tree-grid>
    

    このトピックのはじめにあるコードの結果は、Angular ツリー グリッドの例で確認できます。

    プライマリと外部キー

    Primary and foreign keys オプションを使用した際に各データオブジェクトはプライマリキーと外部キーを含みます。プライマリキーは現在のデータ オブジェクトの一意識別子、外部キーは親の一意識別子です。元のデータソースを含むツリー グリッドの data プロパティがフラットコレクションになります。

    以下は、主と外部キーの関係を定義したフラット コレクションを含むコンポーネントの例です。

    // treeGridSample.component.ts
    
    @Component({
        ...
    })
    export class MyComponent implements OnInit {
    
        public data: any[];
    
        constructor() { }
    
        public ngOnInit() {
            // Primary and Foreign keys sample data
            this.data = [
                { ID: 1, ParentID: -1, Name: "Casey Houston", JobTitle: "Vice President", Age: 32 },
                { ID: 2, ParentID: 1, Name: "Gilberto Todd", JobTitle: "Director", Age: 41 },
                { ID: 3, ParentID: 2, Name: "Tanya Bennett", JobTitle: "Director", Age: 29 },
                { ID: 4, ParentID: 2, Name: "Jack Simon", JobTitle: "Software Developer", Age: 33 },
                { ID: 5, ParentID: 8, Name: "Celia Martinez", JobTitle: "Senior Software Developer", Age: 44 },
                { ID: 6, ParentID: -1, Name: "Erma Walsh", JobTitle: "CEO", Age: 52 },
                { ID: 7, ParentID: 2, Name: "Debra Morton", JobTitle: "Associate Software Developer", Age: 35 },
                { ID: 8, ParentID: 10, Name: "Erika Wells", JobTitle: "Software Development Team Lead", Age: 50 },
                { ID: 9, ParentID: 8, Name: "Leslie Hansen", JobTitle: "Associate Software Developer", Age: 28 },
                { ID: 10, ParentID: -1, Name: "Eduardo Ramirez", JobTitle: "Development Manager", Age: 53 }
            ];
        }
    }
    

    上記サンプル データはすべてのレコードに ID (ParentID と Name、JobTitle、Age.などの追加のプロパティ) があります。レコードの ID は一意である必要があります。ParentID は、親ノードの ID を含みます。行にツリーグリッドのいずれの行にも一致しない ParentID がある場合、行がルート行であることを意味します。

    親子関係は、ツリーグリッドの primaryKeyforeignKey プロパティを使用して設定されます。

    上記フラット コレクションで定義されたデータを表示するツリーグリッドを設定する方法を示すコンポーネントのテンプレートです。

    <!--treeGridSample.component.html-->
    
    <igx-tree-grid #treeGrid [data]="data" primaryKey="ID" foreignKey="ParentID"
        [autoGenerate]="false">
        <igx-column field="Name" dataType="string"></igx-column>
        <igx-column field="JobTitle" dataType="string"></igx-column>
        <igx-column field="Age" dataType="number"></igx-column>
    </igx-tree-grid>
    

    更に rowSelectable プロパティを使用してツリーグリッドの行選択機能、および各列でフィルタリング、ソート、編集、移動、サイズ変更機能を有効にします。

    <!--treeGridSample.component.html-->
    
    <igx-tree-grid #treeGrid [data]="data" primaryKey="ID" foreignKey="ParentID"
        [autoGenerate]="false" [rowSelectable]="true" [allowFiltering]="true">
        <igx-column field="Name" dataType="string" [sortable]="true" [editable]="true" [movable]="true" [resizable]="true"></igx-column>
        <igx-column field="JobTitle" dataType="string" [sortable]="true" [editable]="true" [movable]="true" [resizable]="true"></igx-column>
        <igx-column field="Age" dataType="number" [sortable]="true" [editable]="true" [movable]="true" [resizable]="true"></igx-column>
    </igx-tree-grid>
    

    以下は結果です。

    パーシステンスとインテグレーション

    ツリー セルのインデントは、フィルタリング、ソート、ページングなど他のツリーグリッド全体の機能で永続化されます。

    • sorting が列に適用された際にデータ行がレベルごとにソートされます。ルートレベルの行はそれぞれの子に関係なく個々にソートされます。各子コレクションは個々にソートされます。
    • 最初の列 (visibleIndex 0 を持つ列は、常にツリー列です。
    • 列ピン固定、列の非表示、列移動などの処理後に 0 の visibleIndex で終わる列はツリー列になります。
    • エクスポートした Excel ワークシートは、ツリーグリッドでグループ化されるときにレコードをグループ化して階層に反映できます。すべてのレコードを展開した状態が保持および反映されます。
    • CSV レベルにエクスポートする際に展開した状態は無視されてすべてのデータがフラットでエクスポートされます。

    Angular ツリー グリッド サイズ変更

    Grid サイズ変更 トピックを確認してください。

    Angular ツリー グリッド スタイル設定

    Ignite UI for Angular テーマ ライブラリでスタイルを設定できます。ツリー グリッドの テーマ は、さまざまなプロパティを公開します。これにより、ツリーグリッドのすべての機能をカスタマイズできます。

    Tree Grid (ツリー グリッドのスタイル設定は、すべてのテーマ関数とコンポーネント ミックスインが含まれる index ファイルをインポートする必要があります。

    @import '~igniteui-angular/lib/core/styles/themes/index';
    

    次に、igx-grid-theme を拡張し、必要に応じてツリー グリッドをカスタマイズするために必要なパラメーターを受け取る新しいテーマを作成します。

    Note

    sass 階層グリッド固有の機能はありません。

    $custom-theme: igx-grid-theme(
      $cell-active-border-color: #FFCD0F,
      $cell-selected-background: #6F6F6F,
      $row-hover-background: #F8E495,
      $row-selected-background: #8D8D8D,
      $header-background: #494949,
      $header-text-color: #FFF,
      $expand-icon-color: #FFCD0F,
      $expand-icon-hover-color: #E0B710,
      $resize-line-color: #FFCD0F,
      $row-highlight: #FFCD0F
    );
    

    最後にコンポーネントのテーマを含めます

    @include igx-grid($custom-theme);
    
    Note

    コンポーネントが Emulated ViewEncapsulation を使用している場合、::ng-deep を使用してこのカプセル化を解除する必要があります。

    :host {
        ::ng-deep {
            @include igx-grid($custom-theme);
        }
    }
    

    カラーパレットの定義

    上記のように色の値をハードコーディングする代わりに、igx-paletteigx-color 関数を使用することによって色に関してより高い柔軟性を持つことができます。

    igx-palette は渡された一次色と二次色に基づいてカラーパレットを生成します。

    $yellow-color: #FFCD0F;
    $black-color: #494949;
    $custom-palette: igx-palette($primary: $black-color, $secondary: $yellow-color);
    

    次に igx-color を使用してパレットから簡単に色を取得できます。

    $custom-theme: igx-grid-theme(
        $cell-active-border-color: igx-color($custom-palette, "secondary", 500),
        $cell-selected-background: igx-color($custom-palette, "primary", 300),
        $row-hover-background: igx-color($custom-palette, "secondary", 100),
        $row-selected-background: igx-color($custom-palette, "primary", 100),
        $header-background: igx-color($custom-palette, "primary", 500),
        $header-text-color: igx-contrast-color($custom-palette, "primary", 500),
        $expand-icon-color: igx-color($custom-palette, "secondary", 500),
        $expand-icon-hover-color: igx-color($custom-palette, "secondary", 600),
        $resize-line-color: igx-color($custom-palette, "secondary", 500),
        $row-highlight: igx-color($custom-palette, "secondary", 500)
    );
    

    スキーマの使用

    テーマ エンジンを使用してスキーマの利点を活用でき、堅牢で柔軟な構造を構築できます。スキーマはテーマを使用する方法です。

    すべてのコンポーネントに提供されている 2 つの定義済みスキーマ (ここでは light-grid) の 1 つを拡張します。

    // Extending the light tree grid schema
    $custom-grid-schema: extend($_light-grid, (
        cell-active-border-color: (igx-color:('secondary', 500)),
        cell-selected-background: (igx-color:('primary', 300)),
        row-hover-background: (igx-color:('secondary', 100)),
        row-selected-background: (igx-color:('primary', 100)),
        header-background: (igx-color:('primary', 500)),
        header-text-color: (igx-contrast-color:('primary', 500)),
        expand-icon-color: (igx-color:('secondary', 500)),
        expand-icon-hover-color: (igx-color:('secondary', 600)),
        resize-line-color: (igx-color:('secondary', 500)),
        row-highlight: (igx-color:('secondary', 500))
    ));
    

    カスタム スキーマを適用するには、グローバル (light または dark) の 1 つを拡張する必要があります。これは基本的にカスタム スキーマでコンポーネントをポイントし、その後それぞれのコンポーネント テーマに追加するものです。

    // Extending the global light-schema
    $my-custom-schema: extend($light-schema, (
        igx-grid: $custom-grid-schema
    ));
    
    // Defining grid-theme with the global light schema
    $custom-theme: igx-grid-theme(
        $palette: $custom-palette,
        $schema: $my-custom-schema
    );
    

    上記と同じ方法でテーマを含める必要があることに注意してください。

    Angular ツリー グリッド スタイル設定のデモ

    Note

    このサンプルは、「テーマの変更」から選択したグローバル テーマに影響を受けません。

    既知の制限

    制限 説明
    ツリー セルのテンプレート化 ツリーセルをテンプレート化する場合、セルの境界外にスパンするコンテンツはオーバレイに配置しない限り表示されません。
    グループ化 グループ化機能は、ツリーグリッドに継承されるためサポートされません。
    Note

    ツリー グリッドには、25 レベルの深度制限があります。それ以上のレベルをサポートするには、アプリケーションにカスタム CSS クラスを追加する必要があります。以下には、このような CSS クラスの例を示します。

    .igx-grid__tree-cell--padding-level-26 {
        padding-left: 39rem;
    }
    
    Note

    igxTreeGrid は内部で igxForOf ディレクティブを使用するため、すべての igxForOf の制限が igxTreeGrid で有効です。詳細については、igxForOf 既知の問題 のセクションを参照してください。

    API リファレンス

    テーマの依存関係

    その他のリソース

    コミュニティに参加して新しいアイデアをご提案ください。