React Grid 状態保持

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

    サポートされる機能

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

    • Sorting
    • Filtering
    • Advanced Filtering
    • Paging
    • CellSelection
    • RowSelection
    • ColumnSelection
    • RowPinning
    • Expansion
    • GroupBy
    • Columns
      • 複数列ヘッダー
      • 列の順序
      • IColumnState インターフェイスによって定義される列プロパティ。

    使用方法

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

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

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

    <IgrGrid>
    <IgrGridState ref={(ref) => { gridState = ref; }}></IgrGridState>
</IgrGrid>
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 オブジェクトにグリッドの状態が保存されます。ユーザーがメイン ページに戻るときに、グリッドの状態が復元されます。必要なデータを取得するために、複雑で高度なフィルタリングやソートの式を毎回設定する必要はなくなりました。一度実行して、以下のコードでユーザーに代わって処理してください。

    <IgrGrid rendered={restoreGridState}>
    <IgrGridState ref={(ref) => { gridState = ref; }}></IgrGridState>
</IgrGrid>
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

    デモ

    EXAMPLE
    DATA
    TSX
    CSS
    Edit in:

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

    制限

    その他のリソース