Angular Persistência de estado de grade

    A diretriz igxGridState permite que desenvolvedores salvem e restaurem facilmente o estado da grade. Quando aIgxGridState diretiva é aplicada na grade, ela expõe osgetState métodos esetState que os desenvolvedores podem usar para alcançar persistência de estado em qualquer cenário.

    Supported Features

    IgxGridStateA Diretiva suporta salvar e restaurar o estado das seguintes características:

    • Sorting
    • Filtering
    • Advanced Filtering
    • Paging
    • Cell Selection
    • Row Selection
    • Column Selection
    • Row Pinning
    • Expansion
    • GroupBy
    • Columns

      • Multi column headers

      • Layout de várias linhas

      • Ordem das colunas

      • Propriedades da coluna definidas pelaIColumnState interface.

      • Os modelos e funções de colunas são restaurados usando o código no nível do aplicativo, consulte a seção Restaurando colunas.

    Note

    AIgxGridState diretriz não cuida dos modelos. Vá na seção Restaurar Colunas para ver como restaurar templates de coluna.

    Note

    ORow Selection recurso exige que aprimaryKey propriedade seja definida, para que ela possa ser armazenada/restaurada corretamente.

    Usage

    getState- Esse método retorna o estado da grade em uma string JSON serializada, para que os desenvolvedores possam simplesmente pegá-lo e salvá-lo em qualquer armazenamento de dados (banco de dados, nuvem, localStorage do navegador, etc). O método aceita o primeiro parâmetroserialize opcional, que determina segetState retornará umIGridState objeto ou uma string JSON serializada. O desenvolvedor pode optar por obter apenas o estado de uma ou das funcionalidades específicas, passando o nome da funcionalidade, ou um array com nomes de funcionalidades como segundo argumento.

    // get all features` state in a serialized JSON string
const gridState = state.getState();

// get an `IGridState` object, containing all features original state objects, as returned by the grid public API
const gridState: IGridState = state.getState(false);

// get the sorting and filtering expressions
const sortingFilteringStates: IGridState = state.getState(false, ['sorting', 'filtering']);

    setState- OsetState método aceita a string ouIGridState objeto JSON serializado como argumento e restaurará o estado de cada característica encontrada no objeto/string JSON.

    state.setState(gridState);
state.setState(sortingFilteringStates)

    options- Ooptions objeto implementa aIGridStateOptions 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 O método não colocará o estado desses recursos no valor retornado esetState o método não restaurará o estado para ele.

    public options =  { cellSelection: false; sorting: false; }

    <igx-grid [igxGridState]="options"></igx-grid>

    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 navegadorsessionStorage 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:

    // app.component.ts
@ViewChild(IgxGridStateDirective, { static: true })
public state!: IgxGridStateDirective;

public ngOnInit() {
    this.router.events.pipe(take(1)).subscribe((event: NavigationStart) => {
        this.saveGridState();
    });
}

public ngAfterViewInit() {
    this.restoreGridState();
}

public saveGridState() {
    const state = this.state.getState() as string;
    window.sessionStorage.setItem('grid1-state', state);
}

public restoreGridState() {
    const state = window.sessionStorage.getItem('grid1-state');
    this.state.setState(state);
}

    Restoring columns

    Quando possível, a diretiva de estado reutiliza as colunas que já existem na grade ao restaurar o estado, em vez de criar novas instâncias de coluna. O único cenário em que uma nova instância será criada é quando a coluna (ou seus filhos, no caso de grupos de colunas) não têm propriedadefield, então não há como identificar unicamente a coluna correspondente e reutilizá-la.

    Para tais cenários, são impostas as seguinteslimitations cenários. Nesse caso, restaurar objetos complexos pode ser feito com código no nível da aplicação. Vamos mostrar como fazer isso para colunas com templates:

    1. Defina uma variável de referência modelo (no exemplo abaixo, ela é#activeTemplate) e atribua um gerenciador de eventos para ocolumnInit evento:
    <igx-grid id="grid" #grid igxGridState (columnInit)="onColumnInit($event)">
    <igx-column [field]="'IsActive'" header="IsActive">
        <ng-template igxCell #activeTemplate let-column let-val="val">
            <igx-checkbox [checked]="val"></igx-checkbox>
        </ng-template>
    </igx-column>
    ...
</igx-grid>
    1. Consulte a visualização do modelo no componente usando @ViewChild ou @ViewChildren decorator. NocolumnInit gerenciador de eventos, atribua o template à propriedade da colunabodyTemplate:
    @ViewChild('activeTemplate', { static: true }) public activeTemplate: TemplateRef<any>;
public onColumnInit(column: IgxColumnComponent) {
    if (column.field === 'IsActive') {
        column.bodyTemplate = this.activeTemplate;
        column.summaries = MySummary;
        column.filters = IgxNumberFilteringOperand.instance();
    }
}

    Demo

    Restoring Strategies

    IgxGridStatenão persistirão nem operações remotas nem estratégias de dimensão personalizadas (Para mais informações, veja exemplo de Operações Remotas em Grade) por padrão (vejalimitations). Restaurar qualquer uma dessas opções pode ser feita com código no nível da aplicação. EleIgxGridState expõe um evento chamadostateParsed que pode ser usado para modificar adicionalmente o estado da grade antes de ser aplicado. Vamos mostrar como fazer isso:

    Note

    stateParsedé emitido apenas quando estamos usandosetState com argumento de string.

    • Defina a estratégia de classificação personalizada e as estratégias personalizadas de dimensão de coluna e linha:
    <igx-grid #grid 
          [data]="data" 
          [igxGridState]="options" 
          [sortStrategy]="customStrategy"
          [height]="'500px'">
</igx-grid>

    @ViewChild(IgxGridStateDirective, { static: true })
public state!: IgxGridStateDirective;

public customStrategy = NoopSortingStrategy.instance();
public options: IGridStateOptions = {...};
    • Restaurar o estado dosessionStorage e aplicar as estratégias personalizadas é o seguinte:
    public restoreState() {
    const state = window.sessionStorage.getItem('grid-state');
    this.state.stateParsed.pipe(take(1)).subscribe(parsedState => {
        parsedState.sorting.forEach(x => x.strategy = NoopSortingStrategy.instance());
    });
    this.state.setState(state as string);
}

    Limitations

    API References

    Additional Resources