Web Components Persistência do estado da grade de árvore

A Ignite UI for Web Components State Persistence in Web Components Tree Grid permite que os desenvolvedores salvem e restaurem facilmente o estado da grade. Quando oIgcGridStateComponent é aplicado no Web ComponentsIgcTreeGridComponent, ele expõe ogetState,getStateAsString,applyState eapplyStateFromString métodos que os desenvolvedores podem usar para alcançar persistência de estado em qualquer cenário.

Supported Features

IgcGridStateComponentSuporta salvar e restaurar o estado dos seguintes recursos:

Sorting
Filtering
Filtragem avançada
Paginação
CellSelection
Seleção de linha
ColumnSelection
RowPinning
Expansão
AgruparPor
Columns
- Multi column headers
- Ordem das colunas
- Propriedades da coluna definidas pelaIColumnState interface.

Usage

OgetState método retorna o estado da grade em umIgcGridStateInfo objeto, contendo todas as informações do estado. Medidas adicionais podem ser necessárias para salvá-la.

ElegetStateAsString retorna uma string JSON serializada, então os desenvolvedores podem simplesmente pegá-la e salvá-la em qualquer armazenamento de dados (banco de dados, nuvem, localStorage do navegador, etc).

O desenvolvedor pode optar por obter apenas o estado de um determinado recurso/recursos, passando uma matriz com nomes de recursos como argumento. A matriz vazia resultará no uso das opções de estado padrão.

<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']);

applyState- O método aceita umIgcGridStateInfo objeto como argumento e restaurará o estado de cada característica encontrada no objeto ou características especificadas como segundo argumento.

applyStateFromString- O método aceita uma string JSON serializada como argumento e restaurará o estado de cada característica encontrada na string JSON ou características especificadas como segundo argumento.

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

Ooptions objeto implementa aIgcGridStateOptions interface, ou seja, para cada chave, que é o nome de uma determinada característica, existe o valor booleano indicando se esse estado da característica será rastreado.getState /getStateAsString methods não colocará o estado dessas características no valor retornado eapplyState /applyStateFromString methods não restaurará o estado para elas.

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

As APIs simples de usar permitem alcançar uma funcionalidade completa de persistência de estado em apenas algumas linhas de código. Copie e cole o código abaixo– ele salvará o estado da grade no objeto do navegadorLocalStorage toda vez que o usuário sair da página atual. Sempre que o usuário retorna à página principal, o estado da grade será restaurado. Não é mais necessário configurar aquelas expressões avançadas de filtragem e ordenação toda vez para obter os dados que você quer – faça isso uma vez e o código abaixo faça o restante para seus usuários:

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

Demo

Limitations

getStateAsStringo método JSON.stringify() para converter os objetos originais em uma string JSON. JSON.stringify() não suporta Funções, por isso oIgcGridStateComponent componente ignora as colunasformatter,filtersSummaries,SortStrategy,,CellClasses,,CellStyles eHeaderTemplateBodyTemplate as propriedades.