Premium

Pivot Grid の状態保持

igxGridState ディレクティブによって開発者がグリッドの状態を簡単に保存および復元できます。IgxGridStateDirective ディレクティブがグリッドに適用されると、getState および setState メソッドが公開され、開発者はこれを使用して、あらゆるシナリオで状態の保持を実現できます。

サポートされている機能

IgxGridStateDirective ディレクティブは、以下の機能の状態の保存および復元をサポートします。

ソート
フィルタリング
セルの選択
行の選択
列の選択
展開
ピボット構成
- IPivotConfiguration インターフェイスによって定義されるピボット構成プロパティ。
- ピボットのディメンションと値の関数は、アプリケーションレベルのコードを使用して復元されます。「ピボット構成の復元」セクションを参照してください。
- ピボットの行と列のストラテジもアプリケーションレベルのコードを使用して復元されます。「ピボットストラテジの復元」セクションを参照してください。

Row Selection 機能を使用するには、primaryKey プロパティを設定して、正しく保存/復元する必要があります。

使用方法

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);
}

ピボット構成の復元

IgxGridStateDirective は、デフォルトではピボットディメンション関数、値フォーマッターなどを保持しません (制限を参照)。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;
    }
}

ピボットストラテジの復元

IgxGridStateDirective は、デフォルトでは (制限を参照) リモートピボット操作もカスタムディメンションストラテジも保持しません (詳細については、Pivot Grid リモート操作のサンプルを参照してください)。これらの復元は、アプリケーションレベルのコードで実現できます。IgxGridState は、stateParsed と呼ばれるイベントを公開します。このイベントはグリッド状態が適用される前に追加で変更するために使用できます。以下はその方法です。

IgxGridStateDirective は、文字列引数で setState を使用している場合にのみ発行します。

カスタムソート方法およびカスタムピボット列/行ディメンションストラテジを設定します。

<igx-pivot-grid #grid [data]="data" [pivotConfiguration]="pivotConfigHierarchy" [defaultExpandState]='true'
    [igxGridState]="options" [sortStrategy]="customStrategy" [pivotUI]='{ showConfiguration: 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() は関数をサポートされていないため、IgxGridStateDirective ディレクティブはピボットディメンション IPivotDimension.memberFunction、ピボット値 IPivotValue.member、IPivotValue.formatter、カスタム IPivotValue.aggregate 関数、IPivotValue.styles およびピボット構成ストラテジ (IPivotConfiguration.columnStrategy と IPivotConfiguration.rowStrategy) を無視します。
PivotGrid
IgxGridStateDirective

Pivot Grid の状態保持

サポートされている機能

使用方法

ピボット構成の復元

ピボット ストラテジの復元

制限

その他のリソース

ピボットストラテジの復元