Blazor Grid 集計
Blazor Grid の Ignite UI for Blazor 集計機能は、グループ フッターとして列ごとのレベルで機能します。Blazor IgbGrid 集計は、列内のデータ タイプに応じて、あるいは IgbGrid
にカスタム テンプレートを実装することによって、定義済みのデフォルト集計項目を使用して別のコンテナの列情報を表示できます。
Blazor Grid 集計概要の例
[!Note] 列の集計は列値すべての関数ですが、フィルタリングが適用された場合、列の集計はフィルターされた結果値の関数になります。
IgbGrid
集計を列ごとに有効にして必要な列のみアクティブ化できます。IgbGrid
集計は、列のデータ型に基づいてデフォルト集計の定義済みセットを提供します。
string
および boolean
DataType
の場合、以下の関数が利用できます:
- Count
number
、currency
、および percent
データ型の場合、以下の関数を使用できます。
- Count
- Min
- Max
- Average
- Sum
date
データ型の場合、以下の関数が利用できます:
- Count
- Earliest
- Latest
すべての利用可能な列データ型は、公式の列タイプトピックにあります。
HasSummary
プロパティを true に設定すると IgbGrid
集計が列レベルで有効になります。各列の集計は列のデータ型に基づいて解決されます。IgbGrid
のデフォルトの列データ型は string
のため、number
または date
固有の集計を適用するには、DataType
プロパティを number
または date
に設定します。集計値は、グリッドの Locale
および列 PipeArgs
に従ってローカライズされて表示されます。
<IgbGrid>
<IgbColumn Field="EmployeeID" DataType="GridColumnDataType.Number" HasSummary="true"></IgbColumn>
<IgbColumn Field="FirstName" HasSummary="true"></IgbColumn>
<IgbColumn Field="LastName" HasSummary="true"></IgbColumn>
<IgbColumn Field="Title" HasSummary="true"></IgbColumn>
</IgbGrid>
特定の列や列のリストを有効または無効にする他の方法として IgbGrid
のパブリック メソッド EnableSummaries
/DisableSummaries
を使用する方法があります。
<IgbGrid @ref=grid Id="grid" AutoGenerate="false">
<IgbColumn Field="EmployeeID" DataType="GridColumnDataType.Number" HasSummary="true"></IgbColumn>
<IgbColumn Field="FirstName" Sortable="true" HasSummary="true"></IgbColumn>
<IgbColumn Field="LastName" Sortable="false" DisablePinning="true" DisableHiding="true" HasSummary="true"></IgbColumn>
<IgbColumn Field="Title" Sortable="true" DisablePinning="false" DisableHiding="true"></IgbColumn>
</IgbGrid>
@code {
public async void DisableSummaries()
{
object[] disabledSummaries = { "EmployeeID" };
await this.grid.DisableSummariesAsync(disabledSummaries);
}
}
カスタム Grid 集計
これらの機能が要件を満たさない場合は、カスタム集計を提供できます。
//In JavaScript
class WebGridDiscontinuedSummary {
operate(data, allData, fieldName) {
const discontinuedData = allData.filter((rec) => rec['Discontinued']).map(r => r[fieldName]);
const result = [];
result.push({
key: 'products',
label: 'Products',
summaryResult: data.length
});
result.push({
key: 'total',
label: 'Total Items',
summaryResult: data.length ? data.reduce((a, b) => +a + +b) : 0
});
result.push({
key: 'discontinued',
label: 'Discontinued Products',
summaryResult: allData.map(r => r['Discontinued']).filter((rec) => rec).length
});
result.push({
key: 'totalDiscontinued',
label: 'Total Discontinued Items',
summaryResult: discontinuedData.length ? discontinuedData.reduce((a, b) => +a + +b) : 0
});
return result;
}
}
例で見られるように、基本クラスは Operate
メソッドを公開しているため、すべてのデフォルトの集計を取得して結果を変更するか、まったく新しい集計結果を計算するかを選択できます。
このメソッドは IgbSummaryResult
のリストを返します。
そして、集計を計算するためのオプションのパラメーターを受け取ります。 以下のすべてのデータにアクセスするカスタム集計セクションを参照してください。
[!Note] 集計行の高さを適切に計算するには、データが空の場合でも、Grid が常に適切な長さの
IgbSummaryResult
の配列を返すOperate
メソッドを必要とします。
<IgbGrid
AutoGenerate="true"
Name="grid"
@ref="grid"
Data="NwindData"
PrimaryKey="ProductID"
ColumnInitScript="WebGridCustomSummary">
</IgbGrid>
// In Javascript
igRegisterScript("WebGridCustomSummary", (event) => {
if (event.detail.field === "UnitsInStock") {
event.detail.summaries = WebGridDiscontinuedSummary;
}
}, false);
すべてのデータにアクセスするカスタム集計
カスタム列集計内のすべての Grid データにアクセスできます。SummaryOperand Operate
メソッドには、2 つの追加のオプション パラメーターが導入されています。
以下のコード スニペットで示されるように operate メソッドには以下の 3 つのパラメーターがあります。
- columnData - 現在の列の値のみを含む配列を提供します。
- allGridData - グリッド データソース全体を提供します。
- fieldName - 現在の列フィールド
class WebGridDiscontinuedSummary {
operate(data, allData, fieldName) {
const discontinuedData = allData.filter((rec) => rec['Discontinued']).map(r => r[fieldName]);
result.push({
key: 'totalDiscontinued',
label: 'Total Discontinued Items',
summaryResult: discontinuedData.length ? discontinuedData.reduce((a, b) => +a + +b) : 0
});
return result;
}
}
集計テンプレート
Summary
は、列の集計の結果をコンテキストとして提供する列の集計を対象としています。
<IgbColumn HasSummary="true" SummaryTemplateScript="SummaryTemplate">
</IgbColumn>
igRegisterScript("SummaryTemplate", (ctx) => {
var html = window.igTemplating.html;
return html`<div>
<span> ${ctx.implicit[0].label} - ${ctx.implicit[0].summaryResult} </span>
</div>`
}, false);
デフォルトの集計が定義されている場合、集計領域の高さは、集計の数が最も多い列とグリッドの --ig-size
に応じてデザインにより計算されます。SummaryRowHeight
入力プロパティを使用して、デフォルト値をオーバーライドします。引数として数値が必要であり、falsy の値を設定すると、グリッド フッターのデフォルトのサイズ設定動作がトリガーされます。
グループ化の集計
列のグループがある場合、IgbGrid
は SummaryCalculationMode
と SummaryPosition
を使用して集計配置の変更やモードの計算をします。これら 2 つのプロパティに加えて、IgbGrid
は、参照するグループ行が縮小されたときに集計行が表示されたままであるかどうかを決定できる ShowSummaryOnCollapse
プロパティを公開します。
以下は使用できる SummaryCalculationMode
プロパティの値です:
RootLevelOnly
- ルート レベルのみ集計が計算されます。ChildLevelsOnly
- 子レベルのみ集計が計算されます。RootAndChildLevels
- ルートと子レベルの両方の集計が計算されます。これがデフォルト値です。
以下は使用できる SummaryPosition
プロパティの値です。
Top
- 集計行はグループ列の子の前に表示されます。Bottom
- 集計行はグループ列の子の後に表示されます。これがデフォルト値です。
ShowSummaryOnCollapse
プロパティはブール値です。デフォルト値は false に設定されています。これは、親行が縮小されたときに集計行が非表示になることを意味します。プロパティが true に設定されている場合、グループ行が縮小されたときに、集計行は表示されたままになります。
[!Note]
SummaryPosition
プロパティは子レベルの集計のみに適用します。ルート レベルの集計は、IgbGrid
の下に常に固定されます。
デモ
キーボード ナビゲーション
集計行は、以下のキーボード操作でナビゲーションできます。
- 上矢印 - 1 つ上のセルへ移動。
- 下矢印 - 1 つ下のセルへ移動。
- 左矢印 - 1 つ左のセルへ移動。
- 右矢印 - 1 つ右のセルへ移動。
- CTRL + 左矢印 または HOME - 左端のセルへ移動。
- CTRL + 右矢印 または END - 右端のセルへ移動。
スタイル設定
定義済みのテーマに加えて、利用可能な CSS プロパティのいくつかを設定することで、グリッドをさらにカスタマイズできます。 一部の色を変更したい場合は、最初にグリッドのクラスを設定する必要があります。
<IgbGrid class="grid"></IgbGrid>
次に、そのクラスに関連する CSS プロパティを設定します。
.grid {
--ig-grid-summary-background-color:#e0f3ff;
--ig-grid-summary-focus-background-color: rgba( #94d1f7, .3 );
--ig-grid-summary-label-color: rgb(228, 27, 117);
--ig-grid-summary-result-color: black;
}
デモ
API リファレンス
SummaryOperand
NumberSummaryOperand
DateSummaryOperand
IgbColumnGroup
IgbColumn
その他のリソース
コミュニティに参加して新しいアイデアをご提案ください。