Angular Grid の選択ベースのデータ集計
以下のサンプルでは、グリッドのフッターで選択した値に基づいて、カスタム集計関数と共に集計を表示する際の複数選択の動作を確認できます。
トピックの概要
選択に基づいた集計機能を実現するには、グリッド選択機能とグリッド集計を使用できます。
集計では、列のデータ タイプとニーズに応じて、IgxSummaryOperand、IgxNumberSummaryOperand、IgxDateSummaryOperand のいずれかの基本クラスを拡張することにより、基本的な集計機能をカスタマイズできます。
選択
選択したグリッド範囲のデータの操作を開始するには、グリッド選択の変更を通知するイベントにサブスクライブする必要があります。これは、selected と rangeSelected イベントにサブスクライブすることで実行できます。選択機能では、単一のセル選択とセル範囲の選択が区別されるため、両方にバインドする必要があります。
イベント サブスクリプション ロジックでは、グリッドの getSelectedData 関数を使用して選択したデータを抽出し、選択したデータをカスタム集計オペランドに渡すことができます。
まとめ
カスタム集計クラス内では、グリッドのデータ タイプを差別化する必要があります。たとえば、以下のシナリオでは、4 つの異なる列があり、それぞれのデータ タイプがカスタム集計に適しています。それらは、Unit Price、Units in Stock、Discontinued status、Order Date です。
IgxSummaryOperand の派生クラスの operate メソッドでデータを処理します。データ タイプに基づいて、さまざまなカテゴリにデータを入れていきます。
const numberData = data.filter(rec => typeof rec === "number");
const boolData = data.filter(rec => typeof rec === "boolean");
const dates = data.filter(rec => isDate(rec));
Note
isDate はカスタム関数であることに注意してください。
データ タイプをグループ化した後、集計を開始できます。そのため、IgxNumberSummaryOperand および IgxDateSummaryOperand の既に公開されているメソッドを使用できます。
その後、集計データを同じ配列に配置する必要があり、テンプレートに返されます。
データを可視化には、<igx-grid-footer>を使用することができ、custom-summaries クラスと組み合わせて集計を表示します。
デモ
選択を変更して、現在選択されている範囲の概要を表示します。
API リファレンス
その他のリソース
コミュニティに参加して新しいアイデアをご提案ください。
GitHub