Web Components Pivot Grid 状態保持

    Web Components Pivot Grid の Ignite UI for Web Components 状態保持を使用すると、開発者はグリッドの状態を簡単に保存および復元できます。IgcGridState が Web Components IgcPivotGridComponent に適用されると、GetState、GetStateAsString、ApplyState および ApplyStateFromString メソッドが公開され、開発者はこれを使用して、あらゆるシナリオで状態の永続化を実現できます。

    サポートされる機能

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

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

    使用方法

    getState メソッドは、すべての状態情報を含むグリッドの状態を IgcGridStateInfo オブジェクトで返します。保存するには追加の手順が必要になる場合があります。

    GetStateAsString は、シリアル化された JSON 文字列を返します。これは、開発者がそれを取得して任意のデータストレージ (データベース、クラウド、ブラウザーの localStorage など) に保存できます。

    開発者は、引数として機能名を含む配列を渡すことにより、特定の機能の状態のみを取得することを選択できます。空の配列では、デフォルトの状態オプションが使用されます。

    <igc-pivot-grid id="grid">
    <igc-grid-state id="gridState"></igc-grid-state>
</igc-pivot-grid>
html
    var gridState = document.getElementById('gridState') as IgcGridStateComponent;

// get an `IgcGridStateInfo` object, containing all features original state objects, as returned by the grid public API
const state: IgcGridStateInfo = gridState.getState();

// get all features` state in a serialized JSON string
const stateString: string = gridState.getStateAsString();

// get the sorting and filtering expressions
const sortingFilteringStates: IgcGridStateInfo = gridState.getState(['sorting', 'filtering']);
typescript

    ApplyState - このメソッドは引数として IgcGridStateInfo オブジェクトを受け取り、オブジェクト内で見つかった各フィーチャまたは 2 番目の引数として指定されたフィーチャの状態を復元します。

    ApplyStateFromString - このメソッドはシリアル化された JSON 文字列を引数として受け取り、JSON 文字列内で見つかった各機能の状態、または 2 番目の引数として指定された機能を復元します。

    gridState.applyState(gridState);
gridState.applyStateFromString(gridStateString);
gridState.applyState(sortingFilteringStates)
typescript

    Options オブジェクトは、IgcGridStateOptions インターフェースを実装します。特定の機能の名前であるキーには、この機能の状態を追跡するかどうかを示すブール値があります。GetState/GetStateAsString メソッドはこれらの機能の状態を戻り値に入れず、ApplyState/ApplyStateFromString メソッドはその状態を復元しません。

    gridState.options = { cellSelection: false, sorting: false };
typescript

    これらのシンプルなシングル ポイント API を使用すると、わずか数行のコードで完全な状態維持機能を実現できます。下からコードをコピーして貼り付けます - ユーザーが現在のページを離れるたびに、ブラウザーの LocalStorage オブジェクトにグリッドの状態が保存されます。ユーザーがメイン ページに戻るときに、グリッドの状態が復元されます。必要なデータを取得するために、複雑で高度なフィルタリングやソートの式を毎回設定する必要はなくなりました。一度実行して、以下のコードでユーザーに代わって処理してください。

    constructor() {
    window.addEventListener("load", () => { this.restoreGridState(); });
    window.addEventListener("beforeunload", () => { this.saveGridState(); });
}

// Using methods that work with IgcGridStateInfo object.
public saveGridState() {
    const state = this.gridState.getState();
    window.localStorage.setItem('grid-state', JSON.stringify(state));
}

public restoreGridState() {
    const state = window.localStorage.getItem('grid-state');
    if (state) {
        this.gridState.applyState(JSON.parse(state));
    }
}

// Or using string alternative methods.
public saveGridStateString() {
    const state = this.gridState.getStateAsString();
    window.localStorage.setItem('grid-state', state);
}

public restoreGridStateString() {
    const state = window.localStorage.getItem('grid-state');
    if (state) {
        this.gridState.applyStateFromString(state);
    }
}
typescript
    Ignite UI for Web Components | CTA Banner

    ピボット構成の復元

    IgcGridState は、デフォルトではピボット ディメンション関数、値フォーマッタなどを保持しません (制限を参照)。これらの復元は、アプリケーション レベルのコードで実現できます。IgcPivotGridComponent は、構成に含まれるカスタム関数を戻すために使用できる 2 つのイベント (DimensionInit と ValueInit) を公開します。以下はその方法です。

    • DimensionInit および ValueInit イベントのイベント ハンドラーを割り当てます。
     constructor() {
    var grid = document.getElementById('grid') as IgcPivotGridComponent;
    grid.pivotConfiguration = this.pivotConfiguration;
    grid.addEventListener("valueInit", (ev:any) => this.onValueInit(ev));
    grid.addEventListener("dimensionInit", (ev:any) => this.onDimensionInit(ev));
}
ts

    DimensionInit および ValueInit イベントは、pivotConfiguration プロパティで定義された値とディメンションごとに発行されます。

    • ValueInit イベント ハンドラーで、すべてのカスタム集計、フォーマッタ、およびスタイルを設定します。
    public onValueInit(event: any) {
    const value: IgcPivotValue = event.detail;
    if (value.member === 'AmountofSale') {
        value.aggregate.aggregator = this.totalSale;
        value.aggregateList?.forEach((aggr: any) => {
            switch (aggr.key) {
                case 'SUM':
                    aggr.aggregator = this.totalSale;
                    break;
                case 'MIN':
                    aggr.aggregator = this.totalMin;
                    break;
                case 'MAX':
                    aggr.aggregator = this.totalMax;
                    break;
            }
        });
    } else if (value.member === 'Value') {
        value.formatter = (value: any) => 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;
    }
}
ts
    • In the DimensionInit event handler set all custom MemberFunction implementations:
    public onDimensionInit(event: any) {
    const dim: IgcPivotDimension = event.detail;
    switch (dim.memberName) {
        case 'AllProducts':
            dim.memberFunction = () => 'All Products';
            break;
        case 'ProductCategory':
            dim.memberFunction = (data: any) => data.ProductName;
            break;
        case 'City':
            dim.memberFunction = (data: any) => data.City;
            break;
        case 'SellerName':
            dim.memberFunction = (data: any) => data.SellerName;
            break;
    }
}
ts

    デモ

    EXAMPLE
    DATA
    TS
    HTML
    CSS
    Edit in:

    このサンプルが気に入りましたか? 完全な Ignite UI for Web Componentsツールキットにアクセスして、すばやく独自のアプリの作成を開始します。無料でダウンロードできます。

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

    IgcGridState は、リモート ピボット操作もカスタム ディメンション ストラテジも保持しません。

    これらの復元は、アプリケーション レベルのコードで実現できます。IgcGridState は、StateParsed と呼ばれるイベントを公開します。このイベントはグリッド状態が適用される前に追加で変更するために使用できます。以下はその方法です。

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

    • カスタム ソート方法およびカスタム ピボット列/行ディメンション ストラテジを設定します。
    public pivotConfiguration: IgcPivotConfiguration = {
    columnStrategy: IgcNoopPivotDimensionsStrategy.instance(),
    rowStrategy: IgcNoopPivotDimensionsStrategy.instance(),
    columns: [...],
    rows: [...],
    values: [...],
    filters: [...]
};
private gridState: IgcGridStateComponent;

constructor() {
    var grid = document.getElementById("grid") as IgcPivotGridComponent;
    this.gridState = document.getElementById('gridState') as IgcGridStateComponent;
    grid.pivotConfiguration = this.pivotConfiguration;
    PivotNoopData.getData().then((value) => {
        grid.data = value;
    });
    this.gridState.addEventListener('stateParsed', (ev:any) => this.stateParsedHandler(ev) );
}
ts
    • LocalStorage から状態を復元し、カスタム ストラテジを適用します。
    public restoreGridState() {
    const state = window.localStorage.getItem(this.stateKey);
    if (state) {
        this.gridState.applyStateFromString(state);
    }
}

public stateParsedHandler(ev: any) {
    const parsedState = ev.detail;
    parsedState.pivotConfiguration.rowStrategy = IgcNoopPivotDimensionsStrategy.instance();
    parsedState.pivotConfiguration.columnStrategy = IgcNoopPivotDimensionsStrategy.instance();
}
ts

    EXAMPLE
    DATA
    TS
    HTML
    CSS
    Edit in:

    制限

    • getState メソッドは、JSON.stringify() メソッドを使用して、元のオブジェクトを JSON 文字列に変換します。JSON.stringify() は関数をサポートされていないため、IgcGridState ディレクティブはピボット ディメンション MemberFunction、ピボット値 Member、Formatter、カスタム Aggregate 関数、Styles、およびピボット構成戦略 (ColumnStrategy および RowStrategy) を無視します。