Grid の集計概要

Ignite UI for Angular の Angular UI グリッドには、グループ フッターとして列レベルで集計できる機能があります。Angular グリッド集計は、列内のデータ タイプに応じて、あるいは Grid にカスタム Angular テンプレートを実装することによって、定義済みのデフォルト集計項目を使用して別のコンテナの列情報を表示できます。

デモ


Note

列の集計は列値すべての関数ですが、フィルタリングが適用された場合、列の集計はフィルターされた結果値の関数になります。

Grid 集計を列ごとに有効にして必要な列のみアクティブ化できます。Grid 集計は、列のデータ型に基づいてデフォルト集計の定義済みセットを提供します。

stringboolean data types の場合、データ型の場合、以下の関数が利用できます。

  • count

Number データ型の場合、以下の関数が利用できます。

  • count
  • min
  • max
  • average
  • sum

date データ型の場合、以下の関数が利用できます。

  • count
  • earliest
  • latest

hasSummary プロパティを true に設定すると Grid 集計 が列レベルで有効になります。各列の集計は列のデータ型に基づいて解決されます。igx-grid のデフォルトの列データ型は string のため、number または date 固有の集計を適用するには、dataType プロパティを number または date に設定します。

<igx-grid #grid1 [data]="data" [autoGenerate]="false" height="800px" width="800px" (onColumnInit)="initColumn($event)">
    <igx-column field="ProductID" header="Product ID" width="200px"  [sortable]="true">
    </igx-column>
    <igx-column field="ProductName" header="Product Name" width="200px" [sortable]="true" [hasSummary]="true">
    </igx-column>
    <igx-column field="ReorderLevel" width="200px" [editable]="true" [dataType]="'number'" [hasSummary]="true">
    </igx-column>
</igx-grid>

特定の列や列のリストを有効または無効にする他の方法として igx-grid のパブリック メソッド enableSummaries/disableSummaries を使用する方法があります。

<igx-grid #grid1 [data]="data" [autoGenerate]="false" height="800px" width="800px" (onColumnInit)="initColumn($event)" >
    <igx-column field="ProductID" header="Product ID" width="200px"  [sortable]="true">
    </igx-column>
    <igx-column field="ProductName" header="Product Name" width="200px" [sortable]="true" [hasSummary]="true">
    </igx-column>
    <igx-column field="ReorderLevel" width="200px" [editable]="true" [dataType]="'number'" [hasSummary]="false">
    </igx-column>
</igx-grid>
<button (click)="enableSummary()">Enable Summary</button>
<button (click)="disableSummary()">Disable Summary </button>
public enableSummary() {
    this.grid1.enableSummaries([
        {fieldName: "ReorderLevel", customSummary: this.mySummary},
        {fieldName: "ProductID"}
    ]);
}
public disableSummary() {
    this.grid1.disableSummaries("ProductName");
}

この関数が要件に合わない場合、指定した列にカスタム集計を提供できます。これには、基本クラス IgxSummaryOperandIgxNumberSummaryOperandIgxDateSummaryOperand のいずれかを列データ型や必要に応じてオーバーライドします。このように既存の関数を再定義、または新しい関数を追加できます。IgxSummaryOperand クラスは、count メソッドにデフォルト実装のみを提供します。IgxNumberSummaryOperandIgxSummaryOperand を拡張し、minmaxsumaverage を提供します。IgxDateSummaryOperandIgxSummaryOperand を拡張し、追加で earliestlatest を提供します。

import { IgxSummaryResult, IgxSummaryOperand, IgxNumberSummaryOperand, IgxDateSummaryOperand } from 'igniteui-angular/grid/grid-summary';

class MySummary extends IgxNumberSummaryOperand {

    constructor() {
        super();
    }

    operate(data?: any[]): IgxSummaryResult[] {
        const result = super.operate(data);
        result.push({
            key: 'test',
            label: 'Test',
            summaryResult: data.filter(rec => rec > 10 && rec < 30).length
        });
        return result;
    }
}

上記コードに示すように、メソッド operate がインターフェイスである IgxSummaryResult のリストを返します。

interface IgxSummaryResult {
    key: string;
    label: string;
    summaryResult: any;
}
Note

集計行の高さを正しく計算するために、Grid の operate メソッドでデータが空の場合も常に IgxSummaryResult 配列の正しい長さを返す必要があります。

UnitsInStock 列にカスタム集計を追加します。summaries プロパティを以下に作成するクラスに設定します。

<igx-grid #grid1 [data]="data" [autoGenerate]="false" height="800px" width="800px" (onColumnInit)="initColumn($event)" >
    <igx-column field="ProductID" width="200px"  [sortable]="true">
    </igx-column>
    <igx-column field="ProductName" width="200px" [sortable]="true" [hasSummary]="true">
    </igx-column>
    <igx-column field="UnitsInStock" width="200px" [dataType]="'number'" [hasSummary]="true" [summaries]="mySummary" [sortable]="true">
    </igx-column>
    <igx-column field="ReorderLevel" width="200px" [editable]="true" [dataType]="'number'" [hasSummary]="true">
    </igx-column>
</igx-grid>
...
export class GridComponent implements OnInit {
    mySummary = MySummary;
    ....
}

グループの集計

列のグループがある場合、Grid はsummaryCalculationModesummaryPosition を使用して集計配置の変更やモードの計算をします。

以下は、使用可能な summaryCalculationMode プロパティの値です。

  • rootLevelOnly - ルート レベルのみ集計が計算されます。
  • childLevelsOnly - 子レベルのみ集計が計算されます。
  • rootAndChildLevels - ルートと子レベルの両方の集計が計算されます。これがデフォルト値です。

以下は、使用可能な summaryPosition プロパティの値です。

  • top - 集計行はグループ列の子の前に表示されます。
  • bottom - 集計行はグループ列の子の後に表示されます。これがデフォルト値です。
Note

summaryPosition プロパティは子レベルの集計のみに適用します。ルートレベルの集計は、Grid の下に常に固定されます。

デモ


キーボード ナビゲーション

集計行は、以下のキーボード操作でナビゲーションできます。

  • UP - 1 つ上のセルへ移動。
  • DOWN - 1 つ下のセルへ移動。
  • LEFT - 1 つ左のセルへ移動。
  • RIGHT - 1 つ右のセルへ移動。
  • CTRL + LEFT or HOME - 左端のセルへ移動。
  • CTRL + RIGHT または END - 右端のセルへ移動。
  • TAB - 行の次のセルへ順番に移動して最後のセルの後は次の行へ移動。
  • SHIFT + TAB - 行で前のセルへ順番に移動して最初のセルの後は前の行へ移動。

API リファレンス

その他のリソース

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