Grid の状態保持

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

    サポートされている機能

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

    • ソート
    • フィルタリング
    • 高度なフィルタリング
    • ページング
    • セルの選択
    • 行の選択
    • 列の選択
    • 行のピン固定
    • 展開
    • グループ化
    • 列

      • 複数列ヘッダー

      • 複数行レイアウト

      • 列の順序

      • IColumnState インターフェイスによって定義される列プロパティ。

      • 列テンプレートおよび関数はアプリケーション レベルのコードを使用して復元されます。列の復元セクションを参照してください。

    IgxGridState ディレクティブはテンプレートを処理しません。列テンプレートの復元方法については、「列の復元」セクションを参照してください。

    使用方法

    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']);
typescript

    setState - setState メソッドは、シリアル化されたJSON文字列または IGridState オブジェクトを引数として受け入れ、オブジェクト/JSON 文字列で見つかった各機能の状態を復元します。

    state.setState(gridState);
state.setState(sortingFilteringStates)
typescript

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

    public options =  { cellSelection: false; sorting: false; }
typescript
    <igx-grid [igxGridState]="options"></igx-grid>
html

    これらのシンプルなシングル ポイント 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);
}
typescript

    列の復元

    可能であれば、State ディレクティブは、新しい列インスタンスを作成するのではなく、状態を復元するときにグリッド上に既に存在する列を再利用します。新しいインスタンスが作成される唯一のシナリオは、列 (​​または列グループの場合はその子) に field プロパティがなく、一致する列を一意に識別して再利用する方法がない場合です。

    このようなシナリオでは、以下の制限が課せられます。これらの復元は、アプリケーション レベルのコードで実現できます。テンプレート化された列でこれを行う方法を示します。

    1. テンプレート参照変数 (以下の例では #activeTemplate) を定義し、columnInit イベントにイベント ハンドラーを割り当てます。
    <igx-grid id="grid" #grid igxGridState (columnInit)="onColumnInit($event)">
    <igx-column [field]="'IsActive'" header="IsActive">
        <ng-template igxCell #activeTemplate let-column let-val="val">
            <igx-checkbox [checked]="val"></igx-checkbox>
        </ng-template>
    </igx-column>
    ...
</igx-grid>
html
    1. @ViewChild または @ViewChildren デコレータを使用して、コンポーネントのテンプレート ビューをクエリします。columnInit イベント ハンドラーで、テンプレートを列の bodyTemplate プロパティに割り当てます。
    @ViewChild('activeTemplate', { static: true }) public activeTemplate: TemplateRef<any>;
public onColumnInit(column: IgxColumnComponent) {
    if (column.field === 'IsActive') {
        column.bodyTemplate = this.activeTemplate;
        column.summaries = MySummary;
        column.filters = IgxNumberFilteringOperand.instance();
    }
}
typescript

    デモ

    EXAMPLE
    MODULES
    TS
    HTML
    SCSS
    Edit in:

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

    App Builder | CTA Banner

    ストラテジの復元

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

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

    • カスタム ソート方法およびカスタム列/行ディメンション ストラテジを設定します。
    <igx-grid #grid 
          [data]="data" 
          [igxGridState]="options" 
          [sortStrategy]="customStrategy"
          [height]="'500px'">
</igx-grid>
html
    @ViewChild(IgxGridStateDirective, { static: true })
public state!: IgxGridStateDirective;

public customStrategy = NoopSortingStrategy.instance();
public options: IGridStateOptions = {...};
typescript
    • 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());
    });
    this.state.setState(state as string);
}
typescript

    EXAMPLE

    制限

    API リファレンス

    その他のリソース