Web Components Tree Grid 状態保持

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

サポートされる機能

GridState は、以下の機能の状態の保存および復元をサポートします。

• ソート
• フィルタリング
• 高度なフィルタリング
• ページング
• セルの選択
• 行の選択
• 列の選択
• 行のピン固定
• 展開
• グループ化
• 列
  • 複数列ヘッダー
  • 列の順序
  • IgcColumnState インターフェイスによって定義される列プロパティ

使用方法

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

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

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

<igc-tree-grid id="grid">
    <igc-grid-state id="gridState"></igc-grid-state>
</igc-tree-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",
]);

GridState.applyState - このメソッドは IgcGridStateInfo オブジェクトを引数として受け取り、オブジェクト内で見つかった各機能の状態、または 2 番目の引数として指定された機能を復元します。

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

gridState.applyState(gridState);
gridState.applyStateFromString(gridStateString);
gridState.applyState(sortingFilteringStates)

Options オブジェクトは IgcGridStateOptions インターフェースを実装します。特定の機能の名前であるキーごとに、その機能の状態を追跡するかどうかを示すブール値があります。GridState.getState/GridState.getStateAsString メソッドはこれらの機能の状態を戻り値に含めず、GridState.applyState/GridState.applyStateFromString メソッドはその状態を復元しません。

gridState.options = { cellSelection: false, sorting: false };

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

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);
    }
}

列の復元

GridState はデフォルトで列テンプレート、列フォーマッタなどを保持しません (制限 を参照)。これらの復元は、アプリケーションレベルのコードで実現できます。テンプレート化された列でこれを行う方法を示します。

1 - テンプレート参照変数（以下の例では #activeTemplate）を定義し、ColumnInit イベントのイベント ハンドラーを割り当てます:

<igc-tree-grid id="grid">
    <igc-grid-state id="gridState"></igc-grid-state>
    <igc-column id="isActive" field="IsActive" header="IsActive">
    </igc-column>
</igc-tree-grid>

constructor() {
    var grid = this.grid = document.getElementById('grid') as IgctreeGridComponent;
    var isActive = this.isActive = document.getElementById('isActive') as IgcColumnComponent;
    this.onColumnInit = this.onColumnInit.bind(this);

    this._bind = () => {
        grid.data = this.data;
        grid.addEventListener("columnInit", this.onColumnInit);
        isActive.bodyTemplate = this.activeTemplate;
    }
    this._bind();

}

public activeTemplate = (ctx: IgcCellTemplateContext) => {
    return html`<igc-checkbox checked="${ctx.cell.value}"></igc-checkbox>`;
}

2 - ColumnInit イベント ハンドラーで、テンプレートを列の BodyTemplate プロパティに割り当てます:

public onColumnInit(event: any) {
    const column = event.detail as IgcColumnComponent;
    if (column.field === 'IsActive') {
        column.bodyTemplate = this.activeTemplate;
    }
}

デモ

制限

• GridState.getStateAsString メソッドは、JSON.stringify() メソッドを使用して、元のオブジェクトを JSON 文字列に変換します。JSON.stringify() は関数をサポートしないため、GridState コンポーネントは、列の Formatter、Filters、Summaries、IgcTreeGrid.sortStrategy、Column.cellClasses、CellStyles、HeaderTemplate および BodyTemplate プロパティを無視します。

API リファレンス

その他のリソース

• ページング
• フィルタリング
• ソート
• 選択