Edición por lotes y transacciones en cuadrículas jerárquicas Angular
La función de Edición por Lotes de IgxHierarchicalGrid se basa en.TransactionService Sigue elTransaction Service class hierarchy tema para ver una visión general yigxTransactionService detalles de cómo se implementa.
Para usar elHierarchicalTransactionService withIgxHierarchicalGrid, pero que acumule registros de transacciones separados para cada isla, debería proporcionarse una fábrica de servicios. Uno se exporta y está listo para usarse comoIgxHierarchicalTransactionServiceFactory.
A continuación se muestra un ejemplo detallado de cómo se habilita la edición por lotes para el componente Cuadrícula jerárquica.
Angular Hierarchical Grid Batch Editing and Transactions Example
El siguiente ejemplo muestra un escenario en el que hierarchicalGrid habatchEditing habilitado y tiene activada la edición de filas. Esto último asegurará que la transacción se añada después de confirmar toda la edición de la fila.
Note
El estado de la transacción consta de todas las filas actualizadas, agregadas y eliminadas, y sus últimos estados.
Usage
Para empezar, importa elIgxHierarchicalGridModule archivo en el app.module.ts:
// app.module.ts
...
import { IgxHierarchicalGridModule } from 'igniteui-angular';
@NgModule({
...
imports: [..., IgxHierarchicalGridModule],
...
})
export class AppModule {}
Luego, solo tienes que habilitarbatchEditing desde tu Cuadrícula Jerárquica:
<igx-hierarchical-grid [data]="data" [batchEditing]="true">
...
</igx-hierarchical-grid>
Esto garantizará que se proporcione una instancia adecuada deTransaction servicio para la cuadrícula jerárquica igx. El derechoTransactionService se proporciona a través de unTransactionFactory. Puedes aprender más sobre esta implementación interna en el tema de transacciones.
Después de habilitar la edición por lotes, define unaIgxHierarchicalGrid fuente de datos con enlace yrowEditable configúralo como verdadero y bind:
<igx-hierarchical-grid #hierarchicalGrid [batchEditing]="true" [data]="data" [primaryKey]="'Artist'"
[height]="'580px'" [width]="'100%'" [rowEditable]="true" >
...
<igx-row-island #childGrid [key]="'Albums'" [primaryKey]="'Album'" [rowEditable]="true">
<igx-grid-toolbar></igx-grid-toolbar>
...
<ng-template igxToolbarCustomContent let-grid="grid">
<button igxButton [disabled]="!grid.transactions.canUndo" (click)="undo(grid)">Undo</button>
<button igxButton [disabled]="!grid.transactions.canRedo" (click)="redo(grid)">Redo</button>
</ng-template>
</igx-row-island>
</igx-hierarchical-grid>
...
<div class="buttons-row">
<div class="buttons-wrapper">
<button igxButton [disabled]="!undoEnabledParent" (click)="undo(hierarchicalGrid)">Undo Parent</button>
<button igxButton [disabled]="!redoEnabledParent" (click)="redo(hierarchicalGrid)">Redo Parent</button>
</div>
</div>
...
El siguiente código demuestra el uso de latransactions API: deshacer, rehacer, hacer commit.
...
export class HierarchicalGridBatchEditingSampleComponent {
public undo(grid: any) {
/* exit edit mode and commit changes */
grid.endEdit(true);
grid.transactions.undo();
}
public redo(grid: any) {
/* exit edit mode and commit changes */
grid.endEdit(true);
grid.transactions.redo();
}
public commit() {
this.hierarchicalGrid.transactions.commit(this.data);
this.childGrid.hgridAPI.getChildGrids().forEach((grid) => {
grid.transactions.commit(grid.data);
});
this.dialogChanges.close();
}
}
Note
La API de transacciones no gestionará el final de la edición y tendrías que hacerlo tú mismo. Si no,Hierarchical Grid se quedaría en modo edición. Una forma de hacerlo es llamandoendEdit al método correspondiente.
Note
DesactivarrowEditable la propiedad modificaráHierarchical Grid para crear transacciones al cambiar la celda y no expondrá la superposición de edición de filas en la interfaz.
API References
Additional Resources
- Cree operaciones CRUD con igxGrid
- Descripción general de la cuadrícula jerárquica
- Edición de cuadrícula jerárquica
- Edición de filas de cuadrícula jerárquica
- Agregar filas de cuadrícula jerárquica
GitHub