Web Components Persistência de estado de grade

    A persistência de estado Ignite UI for Web Components em Web Components grade permite que os desenvolvedores salvem e restaurem facilmente o estado da grade. Quando o IgcGridState é aplicado no Web Components IgcGridComponent, ele expõe os GetState métodos e GetStateAsString​ ​ApplyState​ ​ApplyStateFromString que os desenvolvedores podem usar para obter persistência de estado em qualquer cenário.

    Supported Features

    IgcGridState dá suporte ao salvamento e à restauração do 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
      • Column properties defined by the IColumnState interface.

    Usage

    O getState método retorna o estado da grade em um IgcGridStateInfo objeto, contendo todas as informações de estado. Etapas adicionais podem ser necessárias para salvá-lo.

    O GetStateAsString retorna uma string JSON serializada, para que os desenvolvedores possam simplesmente pegá-la e salvá-la em qualquer armazenamento de dados (banco de dados, nuvem, navegador localStorage, 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-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- O método aceita um IgcGridStateInfo objeto como argumento e restaurará o estado de cada recurso encontrado no objeto ou recursos especificados como segundo argumento.

    ApplyStateFromString- O método aceita uma string JSON serializada como argumento e restaurará o estado de cada recurso encontrado na string JSON ou recursos especificados como segundo argumento.

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

    O Options objeto implementa a IgcGridStateOptions interface, ou seja, para cada chave, que é o nome de uma determinada característica, há o valor booleano indicando se esse estado de característica será rastreado. GetState / GetStateAsString methods não colocará o estado desses recursos no valor retornado e ApplyState / ApplyStateFromString methods não restaurará o estado para eles.

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

    As APIs de ponto único simples de usar permitem obter 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 navegador LocalStorage toda vez que o usuário sair da página atual. Sempre que o usuário retornar à página principal, o estado da grade será restaurado. Não há mais necessidade de configurar essas expressões complexas de filtragem e classificação avançadas todas as vezes para obter os dados desejados - faça isso uma vez e faça com que o código abaixo faça o resto 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

    Additional Resources