Pivot Grid の状態保持
igxGridState ディレクティブによって開発者がグリッドの状態を簡単に保存および復元できます。IgxGridState ディレクティブがグリッドに適用されると、getState および setState メソッドが公開され、開発者はこれを使用して、あらゆるシナリオで状態の永続化を実現できます。
サポートされている機能
IgxGridState ディレクティブは、以下の機能の状態の保存および復元をサポートします。
ソートフィルタリングセルの選択行の選択列の選択展開ピボット構成IPivotConfigurationインターフェイスによって定義されるピボット構成プロパティ。- ピボットのディメンションと値の関数は、アプリケーションレベルのコードを使用して復元されます。「ピボット構成の復元」セクションを参照してください。
- ピボットの行と列のストラテジもアプリケーション レベルのコードを使用して復元されます。「ピボット ストラテジの復元」セクションを参照してください。
使用方法
getState - このメソッドは、シリアル化された JSON 文字列でグリッド状態を返します。これは、開発者がそれを取得して任意のデータストレージ (データベース、クラウド、ブラウザーの localStorage など) に保存できます。このメソッドは最初のオプションのパラメーター serialize を受け取り、getState が IGridState オブジェクトを返すか、シリアル化された JSON 文字列を返すかを決定します。
開発者は、機能名、または機能名を 2 番目の引数として持つ配列を渡すことにより、特定の機能の状態のみを取得することを選択できます。
// get all features` state in a serialized JSON string
const gridState = state.getState();
// get an `IGridState` object, containing all features original state objects, as returned by the grid public API
const gridState: IGridState = state.getState(false);
// get the sorting and filtering expressions
const sortingFilteringStates: IGridState = state.getState(false, ['sorting', 'filtering']);
setState - setState メソッドは、シリアル化されたJSON文字列または IGridState オブジェクトを引数として受け入れ、オブジェクト/JSON 文字列で見つかった各機能の状態を復元します。
state.setState(gridState);
state.setState(sortingFilteringStates)
options - options オブジェクトは、IGridStateOptions インターフェースを実装します。特定の機能の名前であるキーには、この機能の状態を追跡するかどうかを示すブール値があります。getState メソッドはこれらの機能の状態を戻り値に入れず、setState メソッドはその状態を復元しません。
public options = { cellSelection: false; sorting: false; }
<igx-pivot-grid [igxGridState]="options"></igx-pivot-grid>
これらのシンプルなシングル ポイント API を使用すると、わずか数行のコードで完全な状態維持機能を実現できます。下からコードをコピーして貼り付けます - ユーザーが現在のページを離れるたびに、ブラウザーの sessionStorage オブジェクトにグリッドの状態が保存されます。ユーザーがメイン ページに戻るときに、グリッドの状態が復元されます。必要なデータを取得するために、複雑で高度なフィルタリングやソートの式を毎回設定する必要はなくなりました。一度実行して、以下のコードでユーザーに代わって処理してください。
// app.component.ts
@ViewChild(IgxGridStateDirective, { static: true })
public state!: IgxGridStateDirective;
public ngOnInit() {
this.router.events.pipe(take(1)).subscribe((event: NavigationStart) => {
this.saveGridState();
});
}
public ngAfterViewInit() {
this.restoreGridState();
}
public saveGridState() {
const state = this.state.getState() as string;
window.sessionStorage.setItem('grid1-state', state);
}
public restoreGridState() {
const state = window.sessionStorage.getItem('grid1-state');
this.state.setState(state);
}
ピボット構成の復元
IgxGridState は、デフォルトではピボット ディメンション関数、値フォーマッターなどを保持しません (制限を参照)。IgxPivotGrid は、構成に含まれるカスタム関数を戻すために使用できる 2 つのイベント (dimensionInit と valueInit) を公開します。以下はその方法です。
dimensionInitおよびvalueInitイベントのイベント ハンドラーを割り当てます。
<igx-pivot-grid #grid1 [data]="data" [pivotConfiguration]="pivotConfig" [igxGridState]="options"
(valueInit)='onValueInit($event)' (dimensionInit)='onDimensionInit($event)'>
</igx-pivot-grid>
dimensionInitおよびvalueInitイベントは、pivotConfigurationプロパティで定義された値とディメンションごとに発行されます。
valueInitイベント ハンドラーで、すべてのカスタム集計、フォーマッター、およびスタイルを設定します。
public onValueInit(value: IPivotValue) {
// Needed only for custom aggregators, formatter or styles.
if (value.member === 'AmountofSale') {
value.aggregate.aggregator = IgxTotalSaleAggregate.totalSale;
value.aggregateList?.forEach((aggr: IPivotAggregator) => {
switch (aggr.key) {
case 'SUM':
aggr.aggregator = IgxTotalSaleAggregate.totalSale;
break;
case 'MIN':
aggr.aggregator = IgxTotalSaleAggregate.totalMin;
break;
case 'MAX':
aggr.aggregator = IgxTotalSaleAggregate.totalMax;
break;
}
});
} else if (value.member === 'Value') {
value.formatter = (value) => value ? '$' + parseFloat(value).toFixed(3) : undefined;
value.styles.upFontValue = (rowData: any, columnKey: any): boolean => parseFloat(rowData.aggregationValues.get(columnKey.field)) > 150
value.styles.downFontValue = (rowData: any, columnKey: any): boolean => parseFloat(rowData.aggregationValues.get(columnKey.field)) <= 150;
}
}
dimensionInitイベント ハンドラーで、すべてのカスタムmemberFunction実装を設定します。
public onDimensionInit(dim: IPivotDimension) {
switch (dim.memberName) {
case 'AllProducts':
dim.memberFunction = () => 'All Products';
break;
case 'ProductCategory':
dim.memberFunction = (data) => data.Product.Name;
break;
case 'City':
dim.memberFunction = (data) => data.Seller.City;
break;
case 'SellerName':
dim.memberFunction = (data) => data.Seller.Name;
break;
}
}
ピボット ストラテジの復元
IgxGridState は、デフォルトで は (制限を参照) リモート ピボット操作もカスタム ディメンション ストラテジも保持しません (詳細については、Pivot Grid リモート操作のサンプルを参照してください)。これらの復元は、アプリケーション レベルのコードで実現できます。IgxGridState は、stateParsed と呼ばれるイベントを公開します。このイベントはグリッド状態が適用される前に追加で変更するために使用できます。以下はその方法です。
stateParsedは、文字列引数でsetStateを使用している場合にのみ発行します。
- カスタム ソート方法およびカスタム ピボット列/行ディメンション ストラテジを設定します。
<igx-pivot-grid #grid [data]="data" [pivotConfiguration]="pivotConfigHierarchy" [defaultExpandState]='true'
[igxGridState]="options" [sortStrategy]="customStrategy" [showPivotConfigurationUI]='false' [superCompactMode]="true" [height]="'500px'">
</igx-pivot-grid>
@ViewChild(IgxGridStateDirective, { static: true })
public state!: IgxGridStateDirective;
public customStrategy = NoopSortingStrategy.instance();
public options: IGridStateOptions = {...};
public pivotConfigHierarchy: IPivotConfiguration = {
columnStrategy: NoopPivotDimensionsStrategy.instance(),
rowStrategy: NoopPivotDimensionsStrategy.instance(),
columns: [...],
rows: [...],
values: [...],
filters: [...]
};
sessionStorageから状態を復元し、カスタム ストラテジを適用します。
public restoreState() {
const state = window.sessionStorage.getItem('grid-state');
this.state.stateParsed.pipe(take(1)).subscribe(parsedState => {
parsedState.sorting.forEach(x => x.strategy = NoopSortingStrategy.instance());
parsedState.pivotConfiguration.rowStrategy = NoopPivotDimensionsStrategy.instance();
parsedState.pivotConfiguration.columnStrategy = NoopPivotDimensionsStrategy.instance();
});
this.state.setState(state as string);
}
制限
getStateメソッドは、JSON.stringify() メソッドを使用して、元のオブジェクトをJSON文字列に変換します。JSON.stringify() は関数をサポートされていないため、IgxGridStateディレクティブはピボット ディメンションmemberFunction、ピボット値member、formatter、カスタムaggregate関数、stylesおよびピボット構成ストラテジ (columnStrategyとrowStrategy) を無視します。
API リファレンス
その他のリソース
GitHub