Persistencia del estado de cuadrícula jerárquica 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.
Supported Features
La directiva IgxGridState
admite guardar y restaurar el estado de las siguientes funciones:
RowIslands
- guardar/restaurar funciones para todas las cuadrículas secundarias en la jerarquía
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.
Note
La directiva IgxGridState
no se ocupa de las plantillas. Vaya a la sección Restaurar columna para ver cómo restaurar plantillas de columna.
Usage
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']);
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)
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; }
<igx-hierarchical-grid [igxGridState]="options"></igx-hierarchical-grid>
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);
}
Restoring columns
IgxGridState
no persistirá en las plantillas de columnas, formateadores de columnas, etc. de forma predeterminada (consulte limitations
). La restauración de cualquiera de estos se puede lograr con código a nivel de aplicación. Vamos a mostrar cómo hacer esto para columnas con plantilla:
- Defina una variable de referencia de plantilla (en el siguiente ejemplo es
#activeTemplate
) y asigne un controlador de eventos para el eventocolumnInit
:
<igx-hierarchical-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-hierarchical-grid>
- 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 propiedadbodyTemplate
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();
}
}
Restoring Child Grids
El estado de guardado/restauración de las cuadrículas secundarias está controlado por la propiedad rowIslands
y está habilitado de forma predeterminada. IgxGridState
utilizará las mismas opciones para guardar/restaurar funciones tanto para la cuadrícula raíz como para todas las cuadrículas secundarias de la jerarquía. Por ejemplo, si pasamos las siguientes opciones:
<!-- public options = {selection: false, sorting: false, rowIslands: true} -->
<igx-grid [igxGridState]="options"></igx-grid>
Luego, la API getState
devolverá el estado de todas las funciones de las cuadrículas (cuadrícula raíz y cuadrículas secundarias), excluyendo selection
y sorting
. Si más adelante el desarrollador desea restaurar solo el estado filtering
para todas las grillas, use:
this.state.setState(state, ['filtering', 'rowIslands']);
Demo
Limitations
- Al restaurar todas las funciones de la cuadrícula a la vez (usando la API
setState
sin parámetros), es posible que las propiedades de las columnas de la cuadrícula raíz se restablezcan a sus valores predeterminados. Si esto sucede, restaure las columnas o la función de selección de columnas por separado después de eso:
state.setState(gridState);
state.setState(gridState.columns);
state.setState(gridState.columnSelection);
- El método
getState
utiliza el método JSON.stringify() para convertir los objetos originales en una cadena JSON. JSON.stringify() no admite funciones, es por eso que la directiva [IgxGridState
] ignorará las propiedadesformatter
de columnas,filters
,summaries
,sortStrategy
,cellClasses
,cellStyles
,headerTemplate
ybodyTemplate
.