Web Components Grid 状態保持
Web Components Grid の Ignite UI for Web Components 状態保持を使用すると、開発者はグリッドの状態を簡単に保存および復元できます。IgcGridState
が Web Components IgcGridComponent
に適用されると、GetState
、GetStateAsString
、ApplyState
および ApplyStateFromString
メソッドが公開され、開発者はこれを使用して、あらゆるシナリオで状態の永続化を実現できます。
サポートされる機能
IgcGridState
ディレクティブは、以下の機能の状態の保存および復元をサポートします。
- Sorting
- Filtering
- Advanced Filtering
- Paging
- CellSelection
- RowSelection
- ColumnSelection
- RowPinning
- Expansion
- GroupBy
- Columns
- 複数列ヘッダー
- 列の順序
IColumnState
インターフェイスによって定義される列プロパティ。
使用方法
getState
メソッドは、すべての状態情報を含むグリッドの状態を IgcGridStateInfo
オブジェクトで返します。保存するには追加の手順が必要になる場合があります。
GetStateAsString
は、シリアル化された JSON 文字列を返します。これは、開発者がそれを取得して任意のデータストレージ (データベース、クラウド、ブラウザーの localStorage など) に保存できます。
開発者は、引数として機能名を含む配列を渡すことにより、特定の機能の状態のみを取得することを選択できます。空の配列では、デフォルトの状態オプションが使用されます。
<igc-grid id="grid">
<igc-grid-state id="gridState"></igc-grid-state>
</igc-grid>
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']);
ApplyState
- このメソッドは引数として IgcGridStateInfo
オブジェクトを受け取り、オブジェクト内で見つかった各フィーチャまたは 2 番目の引数として指定されたフィーチャの状態を復元します。
ApplyStateFromString
- このメソッドはシリアル化された JSON 文字列を引数として受け取り、JSON 文字列内で見つかった各機能の状態、または 2 番目の引数として指定された機能を復元します。
gridState.applyState(gridState);
gridState.applyStateFromString(gridStateString);
gridState.applyState(sortingFilteringStates)
Options
オブジェクトは、IgcGridStateOptions
インターフェースを実装します。特定の機能の名前であるキーには、この機能の状態を追跡するかどうかを示すブール値があります。GetState
/GetStateAsString
メソッドはこれらの機能の状態を戻り値に入れず、ApplyState
/ApplyStateFromString
メソッドはその状態を復元しません。
gridState.options = { cellSelection: false, sorting: false };
これらのシンプルなシングル ポイント API を使用すると、わずか数行のコードで完全な状態維持機能を実現できます。下からコードをコピーして貼り付けます - ユーザーが現在のページを離れるたびに、ブラウザーの SessionStorage
オブジェクトにグリッドの状態が保存されます。ユーザーがメイン ページに戻るときに、グリッドの状態が復元されます。必要なデータを取得するために、複雑で高度なフィルタリングやソートの式を毎回設定する必要はなくなりました。一度実行して、以下のコードでユーザーに代わって処理してください。
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);
}
}
制限
getStateAsString
メソッドは、JSON.stringify() メソッドを使用して、元のオブジェクトを JSON 文字列に変換します。JSON.stringify() が関数をサポートしないため、IgcGridState
コンポーネントは、列のformatter
、filters
、summaries
、sortStrategy
、cellClasses
、cellStyles
、headerTemplate
およびbodyTemplate
プロパティを無視します。