Edición por lotes y transacciones en cuadrículas Angular
La función de edición por lotes de IgxGrid se basa en TransactionService
. Siga el tema Transaction Service class hierarchy
para ver una descripción general de igxTransactionService
y detalles sobre cómo se implementa.
A continuación se muestra un ejemplo detallado de cómo se habilita la edición por lotes para el componente Grid.
Ejemplo de Angular Grid Batch Editing and Transactions
El siguiente ejemplo muestra un escenario en el que la cuadrícula tiene habilitada batchEditing
y la edición de filas. Esto último garantizará que la transacción se agregue después de que se confirme la edición completa de la fila.
¿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.
El estado de la transacción consta de todas las filas actualizadas, agregadas y eliminadas, y sus últimos estados.
Uso
Para comenzar, importe IgxGridModule
en el archivo app.module.ts:
// app.module.ts
...
import { IgxGridModule } from 'igniteui-angular';
@NgModule({
...
imports: [..., IgxGridModule],
...
})
export class AppModule {}
typescript
Luego, todo lo que necesitas hacer es habilitar batchEditing
desde tu Grid:
<igx-grid [data]="data" [batchEditing]="true">
...
</igx-grid>
html
Esto garantizará que se proporcione una instancia adecuada del servicio Transaction
para igx-grid. El TransactionService
adecuado se proporciona a través de TransactionFactory
. Puede obtener más información sobre esta implementación interna en el tema de transacciones.
Después de habilitar la edición por lotes, defina un IgxGrid
con una fuente de datos vinculada y rowEditable
configurado en verdadero y vincule:
<igx-grid #grid [batchEditing]="true" [data]="data" [primaryKey]="'ProductID'" width="100%" height="500px"
[rowEditable]="true">
...
</igx-grid>
...
<button igxButton [disabled]="!grid.transactions.canUndo" (click)="undo()">Undo</button>
<button igxButton [disabled]="!grid.transactions.canRedo" (click)="redo()">Redo</button>
<button igxButton [disabled]="grid.transactions.getAggregatedChanges(false).length < 1"
(click)="openCommitDialog(dialogGrid)">Commit</button>
...
html
El siguiente código demuestra el uso de la API transactions
: deshacer, rehacer y confirmar.
export class GridBatchEditingSampleComponent {
@ViewChild('grid', { read: IgxGridComponent }) public gridRowEditTransaction: IgxGridComponent;
public undo() {
/* exit edit mode and commit changes */
this.grid.endEdit(true);
this.grid.transactions.undo();
}
public redo() {
/* exit edit mode and commit changes */
this.grid.endEdit(true);
this.grid.transactions.redo()
}
public commit() {
this.grid.transactions.commit(this.data);
this.toggle.close();
}
}
typescript
La API de transacciones no se encargará del final de la edición y deberá hacerlo usted mismo. De lo contrario, Grid
permanecería en modo de edición. Una forma de hacerlo es llamando endEdit
en el método respectivo.
Al deshabilitar la propiedad rowEditable
se modificará Grid
para crear transacciones en el cambio de celda y no se expondrá la superposición de edición de filas en la interfaz de usuario.
Paginación remota con demostración de edición por lotes
Consulte la configuración de demostración completa
Referencias de API
Recursos adicionales
- Cree operaciones CRUD con igxGrid
- Descripción general de la cuadrícula
- Edición de cuadrícula
- Edición de filas de cuadrícula
- Agregar filas de cuadrícula