グリッドの集計

Ignite UI for Angular Grid コンポーネントには、列レベルで制御可能な集計機能があります。

デモ


Note

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

列のデータ型に基づいて定義済みのデフォルト集計項目を持つ別のコンテナーで列情報を表示します。Ignite UI for Angular でグリッド集計を列ごとに有効にして必要な列のみアクティブ化できます。グリッド集計は、列のデータ型に基づいてデフォルト集計の定義済みセットを提供します。

string および boolean データ型の場合、以下の関数が利用できます。

  • count

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

  • count
  • min
  • max
  • average
  • sum

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

  • count
  • earliest
  • latest

列で hasSummary プロパティを true に設定するとグリッド集計が有効になります。各列の集計は列のデータ型に基づいて解決されます。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>

特定の列または列のリストで集計を有効/無効にするもう 1 つの方法として 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");
}

この関数が要件に合わない場合、指定した列にカスタム集計を提供できます。これを実装するには、列のデータ型に基づいて IgxSummaryOperand、IgxNumberSummaryOperand、または IgxDateSummaryOperand の基本クラスをオーバーライドします。このように既存の関数を変更または新しい関数を追加できます。IgxSummaryOperand クラスのデフォルト集計は count メソッドのみです。IgxNumberSummaryOperand は IgxSummaryOperand を拡張し、min、max、sum、および average 集計を提供します。IgxDateSummaryOperand は IgxSummaryOperand を拡張し、earliest および latest を提供します。

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

集計行の高さを正しく計算するためにグリッドで 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;

    ....
}

グループ集計

グループ列がある場合、summaryCalculationMode や summaryPosition でグリッド集計の配置や計算モードを変更できます。

以下は使用できる summaryCalculationMode プロパティの値です。

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

以下は使用できる summaryCalculationMode プロパティの値です。

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

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

デモ


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

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

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

API リファレンス

その他のリソース

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

ページを開く: GitHub