React Hierarchical Grid 状態保持

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

    サポートされる機能

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

    • RowIslands
      • 階層のすべての子グリッドの保存/復元機能
    • Sorting
    • Filtering
    • AdvancedFiltering
    • Paging
    • CellSelection
    • RowSelection
    • ColumnSelection
    • RowPinning
    • Expansion
    • Columns
      • 新規: 複数列ヘッダーが標準でサポートされるようになりました。
      • 列の順序
      • IColumnState インターフェイスによって定義される列プロパティ。

    使用方法

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

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

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

    <IgrHierarchicalGrid>
    <IgrGridState ref={(ref) => { gridState = ref; }}></IgrGridState>
</IgrHierarchicalGrid>
tsx
    // get an `IgrGridStateInfo` object, containing all features original state objects, as returned by the grid public API
const state: IgrGridStateInfo = gridState.getState([]);

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

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

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

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

    gridState.applyState(gridState, []);
gridState.applyStateFromString(gridStateString, []);
gridState.applyState(sortingFilteringStates, [])
tsx

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

    <IgrGridState options={{ cellSelection: false, sorting: false }}></IgrGridState>
tsx

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

    <IgrHierarchicalGrid rendered={restoreGridState}>
    <IgrGridState ref={(ref) => { gridState = ref; }}></IgrGridState>
</IgrHierarchicalGrid>
tsx
    useEffect(() => {
    restoreGridState();
    window.addEventListener('beforeunload', saveGridState);
    return () => {
      window.removeEventListener('beforeunload', saveGridState);
    }
}, []);

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

function restoreGridState() {
    const state = window.localStorage.getItem('grid-state');
    if (state) {
        gridState.applyState(JSON.parse(state), []);
    }
}

//Or using string alternative methods.
function saveGridState() {
    const state = gridState.getStateAsString([]);
    window.localStorage.setItem('grid-state', state);
}

function restoreGridState() {
    const state = window.localStorage.getItem('grid-state');
    if (state) {
        gridState.applyStateFromString(state, []);
    }
}
tsx
    Ignite UI for React | CTA Banner

    子グリッドの復元

    子グリッドの状態の保存/復元は、RowIslands プロパティによって制御され、デフォルトで有効に設定されています。IgrGridState は、ルート グリッドと階層のすべての子グリッドの両方の機能を保存/復元するために同じオプションを使用します。たとえば、以下のオプションを渡す場合:

    <IgrHierarchicalGrid>
    <IgrGridState options={{ cellSelection: false, sorting: false, rowIslands: true }}></IgrGridState>
</IgrHierarchicalGrid>
tsx

    getState API は、Selection と Sorting を除くすべてのグリッド (ルート グリッドと子グリッド) 機能の状態を返します。開発者が後ですべてのグリッドの Filtering 状態のみを復元するには、以下を使用します。

    this.state.applyState(state, ['filtering', 'rowIslands']);
typescript

    デモ

    EXAMPLE
    TSX
    CSS
    Edit in:

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

    制限

    • パラメーターなしで applyState API を使用してすべてのグリッド機能を一度に復元する場合、ルート グリッドの列プロパティがデフォルトにリセットされる場合があります。その場合は、後で列または列の選択機能を復元してください。
    state.applyState(gridState);
state.applyState(gridState.columns);
state.applyState(gridState.columnSelection);
typescript