Tree Grid の状態保持
igxGridState ディレクティブによって開発者がグリッドの状態を簡単に保存および復元できます。IgxGridState
ディレクティブがグリッドに適用されると、getState
および setState
メソッドが公開され、開発者はこれを使用して、あらゆるシナリオで状態の永続化を実現できます。
サポートされている機能
IgxGridState
ディレクティブは、以下の機能の状態の保存および復元をサポートします。
ソート
フィルタリング
高度なフィルタリング
ページング
セルの選択
行の選択
列の選択
行のピン固定
展開
グループ化
複数の列
- 新規: 複数列ヘッダーが標準でサポートされるようになりました。
- 列の順序
IColumnState
インターフェイスによって定義される列プロパティ。- 列テンプレートおよび関数はアプリケーション レベルのコードを使用して復元されます。列の復元セクションを参照してください。
Note
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']);
setState
- setState
メソッドは、シリアル化されたJSON文字列または IGridState
オブジェクトを引数として受け入れ、オブジェクト/JSON 文字列で見つかった各機能の状態を復元します。
state.setState(gridState);
state.setState(sortingFilteringStates)
options
- options
オブジェクトは、IGridStateOptions
インターフェースを実装します。特定の機能の名前であるキーには、この機能の状態を追跡するかどうかを示すブール値があります。getState
メソッドはこれらの機能の状態を戻り値に入れず、setState
メソッドはその状態を復元しません。
public options = { cellSelection: false; sorting: false; }
<igx-tree-grid [igxGridState]="options"></igx-tree-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
はデフォルトで列テンプレート、列フォーマッタなどを保持しません (制限
を参照)。これらの復元は、アプリケーション レベルのコードで実現できます。テンプレート化された列でこれを行う方法を示します。
- テンプレート参照変数 (以下の例では
#activeTemplate
) を定義し、columnInit
イベントにイベント ハンドラーを割り当てます。
<igx-tree-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-tree-grid>
- @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();
}
}
デモ
制限
getState
メソッドは、JSON.stringify() メソッドを使用して、元のオブジェクトを JSON 文字列に変換します。JSON.stringify() が関数をサポートしないため、[IgxGridState
] ディレクティブは、列のformatter
、filters
、summaries
、sortStrategy
、cellClasses
、cellStyles
、headerTemplate
およびbodyTemplate
プロパティを無視します。