階層グリッド

Ignite UI for Angular 階層データ グリッド は、データの表示や操作が簡単にできます。最小限のコードでデータをすばやくバインドするか、さまざまなイベントを使用してさまざまな動作をカスタマイズします。このコンポーネントは、データ選択、Excel スタイル フィルタリング、ソート、ページング、テンプレート、列移動などの豊富な機能を提供します。Hierarchical Grid は、Flat Grid コンポーネントをベースとして構築されており、親グリッドの行の展開/縮小、詳細な情報が必要な場合に対応する子グリッドを表示する機能を拡張しました。マテリアル テーブル ベースの UI グリッドにより、階層データの表示がさらに簡単できれいになりました。

Angular 階層グリッドの例

この Angular グリッドの例では、ユーザーがデータの階層セットを視覚化し、セル テンプレートを使用してスパークラインなどの他の視覚的コンポーネントを追加する方法を確認できます。

このサンプルが気に入りましたか? 完全な Angular ツールキットにアクセスして、すばやく独自のアプリの作成を開始します。無料でダウンロードできます。

codesandbox で表示 Stackblitz で表示

依存関係

Note

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

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

ng add igniteui-angular

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

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

// app.module.ts

import { IgxHierarchicalGridModule } from 'igniteui-angular';

@NgModule({
    imports: [
        ...
        IgxHierarchicalGridModule,
        ...
    ]
})
export class AppModule {}

以下の方法で TypeScript の Hierarchical Grid の参照を取得します。

@ViewChild('hgrid1', { read: IgxHierarchicalGridComponent })
public hgrid1: IgxHierarchicalGridComponent;

データ バインディング

igx-hierarchical-grid は、igx-grid から派生し、ほとんどの機能を共有します。主要な違いは階層で複数レベルを定義できることです。Igx-row-island と呼ばれる Igx-hierarchical-grid の定義内の個別のタグで設定されます。igx-row-island コンポーネントは、特定レベルの各子グリッドの設定を定義します。レベルごとの複数行アイランドがサポートされます。 階層グリッドで 2 通りのデータ バインドがサポートされます。

階層データの使用

アプリケーションが階層データ全体をオブジェクトの子配列を参照するオブジェクトの配列として読み込む場合、Hierarchical Grid を設定して読み込み、自動的にバインドすることができます。以下はプロパティ構造の階層データソースのプロパティの例です。

export const singers = [{
    "Artist": "Naomí Yepes",
    "Photo": "assets/images/hgrid/naomi.png",
    "Debut": "2011",
    "Grammy Nominations": 6,
    "Grammy Awards": 0,
    "Tours": [{
        "Tour": "Faithful Tour",
        "Started on": "Sep-12",
        "Location": "Worldwide",
        "Headliner": "NO",
        "Toured by": "Naomí Yepes"
    }],
    "Albums": [{
        "Album": "Dream Driven",
        "Launch Date": new Date("August 25, 2014"),
        "Billboard Review": "81",
        "US Billboard 200": "1",
        "Artist": "Naomí Yepes",
        "Songs": [{
            "No.": "1",
            "Title": "Intro",
            "Released": "*",
            "Genre": "*",
            "Album": "Dream Driven"
        }]
    }]
}];

各 igx-row-island は、子データを保持するプロパティのキーを指定します。

<igx-hierarchical-grid #hierarchicalGrid [data]="singers" [autoGenerate]="true">
    <igx-row-island [key]="'Albums'" [autoGenerate]="true">
        <igx-row-island [key]="'Songs'" [autoGenerate]="true">
        </igx-row-island>
    </igx-row-island>
    <igx-row-island [key]="'Tours'" [autoGenerate]="true">
    </igx-row-island>
</igx-hierarchical-grid>

Note

data の代わりにユーザーは、データを自動的に設定するめの読み込みに igx-hierarchical-grid が必要な key のみ設定します。

ロードオンデマンドの使用

ほとんどのアプリケーションがはじめに最小限のデータを読み込むようでざいんされているため、結果的に読み込み時間が短くなります。このような場合、igx-hierarchical-grid を設定してユーザーが作成したサービスでデータのオンデマンド フィードを可能にします。以下の設定は、特別な @Output と新しい loading-in-progress テンプレートでロードオンデマンドのすべての機能が提供されます。

<!-- hierarchicalGridSample.component.html -->

    <igx-hierarchical-grid #hGrid [primaryKey]="'CustomerID'" [autoGenerate]="true" [height]="'600px'" [width]="'100%'">
        <igx-row-island [key]="'Orders'" [primaryKey]="'OrderID'" [autoGenerate]="true"  (onGridCreated)="gridCreated($event, 'CustomerID')">
            <igx-row-island [key]="'Order_Details'" [primaryKey]="'ProductID'" [autoGenerate]="true" (onGridCreated)="gridCreated($event, 'OrderID')">
            </igx-row-island>
        </igx-row-island>
    </igx-hierarchical-grid>

//  hierarchicalGridSample.component.ts

export class HierarchicalGridLoDSampleComponent implements AfterViewInit {
    @ViewChild("hGrid")
    public hGrid: IgxHierarchicalGridComponent;

    constructor(private remoteService: RemoteLoDService) { }

    public ngAfterViewInit() {
        this.hGrid.isLoading = true;
        this.remoteService.getData({ parentID: null, rootLevel: true, key: "Customers" }).subscribe((data) => {
            this.hGrid.isLoading = false;
            this.hGrid.data = data;
            this.hGrid.cdr.detectChanges();
        });
    }

    public gridCreated(event: IGridCreatedEventArgs, _parentKey: string) {
        const dataState = {
            key: event.owner.key,
            parentID: event.parentID,
            parentKey: _parentKey,
            rootLevel: false
        };
        event.grid.isLoading = true;
        this.remoteService.getData(dataState).subscribe(
            (data) => {
                event.grid.isLoading = false;
                event.grid.data = data;
                event.grid.cdr.detectChanges();
            }
        );
    }
}

// remote-load-on-demand.service.ts

@Injectable()
export class RemoteLoDService {
    public url = `https://services.odata.org/V4/Northwind/Northwind.svc/`;

    constructor(private http: HttpClient) { }

    public getData(dataState?: any): Observable<any[]> {
        return this.http.get(this.buildUrl(dataState)).pipe(
            map((response) => response["value"])
        );
    }

    public buildUrl(dataState) {
        let qS = "";
        if (dataState) {
            qS += `${dataState.key}?`;

            if (!dataState.rootLevel) {
                if (typeof dataState.parentID === "string") {
                    qS += `$filter=${dataState.parentKey} eq '${dataState.parentID}'`;
                } else {
                    qS += `$filter=${dataState.parentKey} eq ${dataState.parentID}`;
                }
            }
        }
        return `${this.url}${qS}`;
    }
}

機能

グリッド機能を有効にして igx-row-island マークアップを介して設定し、作成された各グリッドに適用されます。ランタイムに行アイランド インスタンスでオプションを変更すると生成した各グリッドで変更されます。

<igx-hierarchical-grid [data]="localData" [displayDensity]="density" [autoGenerate]="false"
    [allowFiltering]='true' [paging]="true" [height]="'600px'" [width]="'800px'" #hGrid>
    <igx-column field="ID" [pinned]="true" [filterable]='true'></igx-column>
    <igx-column-group header="Information">
        <igx-column field="ChildLevels"></igx-column>
        <igx-column field="ProductName" hasSummary='true'></igx-column>
    </igx-column-group>
    <igx-row-island [key]="'childData'" [autoGenerate]="false" [rowSelectable]='true' #layout1>
        <igx-column field="ID" [hasSummary]='true' [dataType]="'number'"></igx-column>
        <igx-column-group header="Information2">
            <igx-column field="ChildLevels"></igx-column>
            <igx-column field="ProductName"></igx-column>
        </igx-column-group>
    </igx-row-island>
</igx-hierarchical-grid>

以下のグリッド機能はグリッド レベルごとに動作するため、各グリッド インスタンスが残りのグリッドとは別に管理します。

• ソート
• フィルタリング
• ページング
• 複数列ヘッダー
• 非表示
• ピン固定
• 移動
• 集計
• 検索

選択とナビゲーション機能は、igx-hierarchical-grid 全体でグローバルに作用します。

• 選択 選択は、選択したセルを異なる 2 つの子グリッドで同時に表示することを許可しません。
• ナビゲーション up/down へ移動するときに next/prev 要素が子グリッドの場合、ナビゲーションが関連子グリッド内で継続され、関連セルが選択済みにマークされ、フォーカスされます。子セルが現在の表示ビューポート以外にある場合にビューへスクロールされるため、選択したセルが常に表示されます。

[すべて縮小] ボタン

左上の角にある [すべて縮小] ボタンを押して Hierarchical Grid で展開されてる行を縮小できます。更に他のグリッドを含む各子グリッドと Hierarchical Grid にも同様のボタンがあり、階層の特定のグリッドのみ縮小することができます。

サイズ変更

詳細については、Grid サイズ変更トピックをご覧ください。

CRUD 操作

Note

フラットな Data Grid と行アイランドの各インスタンスの重要な違いは、同じトランザクション サービス インスタンスがあり、同じトランザクション ログを蓄積する点です。CRUD 機能を有効にするには、IgxHierarchicalTransactionServiceFactory を注入する必要があります。

CRUD API メソッドの呼び出しは,各グリッド インスタンスで可能です。

スタイル設定

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

以下の手順では、igxHierarchicalGrid スタイルをカスタマイズする手順を実行しています。

グローバル テーマのインポート

階層グリッドのカスタマイズは、すべてのスタイリング機能と mixins が配置されている 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
);

カスタム カラー パレットの定義

上記で説明したアプローチでは、色の値がハード コーディングされていました。または、igx-palette および igx-color 関数を使用して、柔軟性を高めることができます。
Igx-palette は指定した一次色と二次色に基づいてカラーパレットを生成します。

$black-color: #494949;
$yellow-color: #FFCD0F;

$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 つの事前定義されたスキーマの 1 つを拡張します。この場合、$_light_grid を使用します。

$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 グローバルを拡張する必要があります。プロセス全体が実際にコンポーネントにカスタム スキーマを提供し、その後、それぞれのコンポーネントテーマに追加します。

$my-custom-schema: extend($light-schema, ( 
    igx-grid: $custom-grid-schema
));

$custom-theme: igx-grid-theme(
    $palette: $custom-palette,
    $schema: $my-custom-schema
);

カスタム テーマの適用

テーマを適用する最も簡単な方法は、グローバル スタイル ファイルに sass @include ステートメントを使用することです。

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

スコープ コンポーネント テーマ

カスタム テーマが特定のコンポーネントのみに影響するように、定義したすべてのスタイルをグローバル スタイル ファイルからカスタム コンポーネントのスタイルファイルに移動できます (index ファイルのインポートを含む)。

このように、Angular の ViewEncapsulation により、スタイルはカスタム コンポーネントにのみ適用されます。

Note

コンポーネントが Emulated ViewEncapsulation を使用している場合、グリッドのスタイル設定は ::ng-deep を使用してこのカプセル化を解除する必要があります。

Note

ステートメントがコンポーネントの外にある要素に影響を与えないよう、ステートメントを :host セレクター内にラップします。

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

デモ

codesandbox で表示 StackBlitz で表示

既知の問題と制限

制限	説明
グループ化	グループ化機能は、階層グリッドでサポートされません。
Excel エクスポート	Excel へのエクスポートは Hierarchical Grid でサポートされませんが、今後の Ignite UI for Angular アップデートでサポート予定です。

Note

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

API リファレンス

• IgxHierarchicalGridComponent
• IgxRowIslandComponent
• IgxGridComponent
• IgxGridComponent スタイル
• IgxColumnComponent
• IgxGridRowComponent
• IgxGridCellComponent

その他のリソース

• グリッド サイズ変更
• 仮想化とパフォーマンス
• ページング
• フィルタリング
• ソート
• 集計
• 列移動
• 列のピン固定
• 列のサイズ変更
• 選択

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

• Ignite UI for Angular フォーラム (英語)
• Ignite UI for Angular GitHub (英語)