グリッドの集計
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 リファレンス
- IgxGridComponent
- IgxGridComponent スタイル
- IgxGridSummaries スタイル
- IgxSummaryOperand
- IgxNumberSummaryOperand
- IgxDateSummaryOperand
- IgxColumnGroupComponent
- IgxColumnComponent