Persistencia del estado de la cuadrícula de árbol Angular

    La directiva igxGridState permite a los desarrolladores guardar y restaurar fácilmente el estado de la red. Cuando la directiva IgxGridState se aplica en la grilla, expone los métodos getState y setState que los desarrolladores pueden usar para lograr la persistencia del estado en cualquier escenario.

    Funciones admitidas

    La directiva IgxGridState admite guardar y restaurar el estado de las siguientes funciones:

    • Sorting
    • Filtering
    • Advanced Filtering
    • Paging
    • Cell Selection
    • Row Selection
    • Column Selection
    • Row Pinning
    • Expansion
    • Columns
      • NUEVO: Los encabezados de varias columnas ahora son compatibles desde el primer momento
      • Orden de columnas
      • Propiedades de columna definidas por la interfaz IColumnState.
      • Las plantillas y funciones de las columnas se restauran utilizando código a nivel de aplicación; consulte la sección Restauración de columnas.

    La directiva IgxGridState no se ocupa de las plantillas. Vaya a la sección Restaurar columna para ver cómo restaurar plantillas de columna.

    Uso

    getState: este método devuelve el estado de la cuadrícula en una cadena JSON serializada, por lo que los desarrolladores pueden simplemente tomarlo y guardarlo en cualquier almacenamiento de datos (base de datos, nube, almacenamiento local del navegador, etc.). El método acepta el primer parámetro opcional serialize, que determina si getState devolverá un objeto IGridState o una cadena JSON serializada. El desarrollador puede optar por obtener solo el estado de una determinada característica/características, pasando el nombre de la característica o una matriz con nombres de características 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']);
typescript

    setState: el método setState acepta la cadena JSON serializada o el objeto IGridState como argumento y restaurará el estado de cada característica encontrada en el objeto/cadena JSON.

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

    options: el objeto options implementa la interfaz IGridStateOptions, es decir, para cada clave, que es el nombre de una determinada característica, existe el valor booleano que indica si se rastreará el estado de esta característica. El método getState no pondrá el estado de estas funciones en el valor devuelto y el método setState no restaurará el estado.

    public options =  { cellSelection: false; sorting: false; }
typescript
    <igx-tree-grid [igxGridState]="options"></igx-tree-grid>
html

    Las API de punto único, fáciles de usar, permiten lograr una funcionalidad de persistencia de estado completa en solo unas pocas líneas de código. Copie y pegue el código a continuación: guardará el estado de la cuadrícula en el objeto sessionStorage del navegador cada vez que el usuario abandone la página actual. Siempre que el usuario regrese a la página principal, se restaurará el estado de la cuadrícula. Ya no es necesario configurar esas complejas expresiones avanzadas de filtrado y clasificación cada vez para obtener los datos que desea: hágalo una vez y haga que el código siguiente haga el resto para sus usuarios:

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

    Restaurando columnas

    Cuando sea posible, la directiva de estado reutilizará las columnas que ya existen en la cuadrícula al restaurar el estado, en lugar de crear nuevas instancias de columna. El único escenario en el que se creará una nueva instancia es cuando la columna (o sus elementos secundarios en el caso de los grupos de columnas) no tenga ninguna field propiedad, por lo que no hay forma de identificar de forma única la columna coincidente y volver a utilizarla.

    Para tales escenarios, se impone lo siguiente limitations. En ese caso, la restauración de objetos complejos se puede lograr con código en el nivel de aplicación. Vamos a mostrar cómo hacer esto para las columnas con plantilla:

    1. Defina una variable de referencia de plantilla (en el siguiente ejemplo es #activeTemplate) y asigne un controlador de eventos para el evento columnInit:
    <igx-tree-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-tree-grid>
html
    1. Consulte la vista de plantilla en el componente usando el decorador @ViewChild o @ViewChildren. En el controlador de eventos columnInit, asigne la plantilla a la propiedad bodyTemplate de la columna:
    @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();
    }
}
typescript

    Manifestación

    EXAMPLE
    TS
    HTML
    SCSS
    Edit in:

    ¿Te gusta esta muestra? Obtenga acceso a nuestro kit de herramientas de Ignite UI for Angular completo y comience a crear sus propias aplicaciones en minutos. Descárgalo gratis.

    App Builder | CTA Banner

    Limitaciones

    Referencias de API

    Recursos adicionales