Premium

Web Components Grid の選択ベースのデータ集計

以下のサンプルでは、グリッドのフッターで選択した値に基づいて、カスタム集計関数と共に集計を表示する際の複数選択の動作を確認できます。

トピックの概要

選択に基づいた集計機能を実現するには、グリッド選択機能とグリッド集計を使用できます。集計では、列のデータタイプとニーズに応じて、IgcSummaryOperand、IgcNumberSummaryOperand.html、IgcDateSummaryOperand のいずれかの基本クラスを拡張することにより、基本的な集計機能をカスタマイズできます。

選択

選択したグリッド範囲のデータの操作を開始するには、グリッド選択の変更を通知するイベントにサブスクライブする必要があります。これは、selected イベントと rangeSelected イベントにサブスクライブすることで実行できます。選択機能では、単一のセル選択とセル範囲の選択が区別されるため、両方にバインドする必要があります。

イベントサブスクリプションロジックでは、グリッド getSelectedData.html#getSelectedData) 関数を使用して選択したデータを抽出し、選択したデータをカスタム集計オペランドに渡すことができます。

集計

カスタム集計クラス内では、グリッドのデータタイプを差別化する必要があります。たとえば、以下のシナリオでは、4 つの異なる列があり、それぞれのデータタイプがカスタム集計に適しています。それらは、Unit Price、Units in Stock、Discontinued status、Order Date です。 IgcSummaryOperand の派生クラスの operate メソッドでデータを処理します。データタイプに基づいて、さまざまなカテゴリにデータを入れていきます。

const numberData = data.filter(rec => typeof rec === "number");
const boolData = data.filter(rec => typeof rec === "boolean");
const dates = data.filter(rec => isDate(rec));

isDate はカスタム関数であることに注意してください。

データタイプをグループ化した後、集計を開始できます。そのため、IgcNumberSummaryOperand および IgcDateSummaryOperand の既に公開されているメソッドを使用できます。その後、集計データを同じ配列に配置する必要があり、テンプレートに返されます。データを可視化には、グリッドフッターを使用することができ、custom-summaries クラスと組み合わせて集計を表示します。

API リファレンス

Grid
IgcCellType

その他のリソース

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