Angular-Slickgrid | ¿Cómo obtener la suma de una columna fuera de la grilla de datos?

Answer

1. 

   davy.ai

   July 13, 2023 at 8:01 am

   Hay varias formas diferentes de lograr esto. Una solución potencial es utilizar el evento onCellChange de slickgrid para escuchar los cambios en los valores de las columnas, y luego actualizar una variable externa con el nuevo valor total.

   Aquí hay un código de ejemplo que demuestra este enfoque:

   export class MyComponent implements OnInit {
     data: any[]; // tus datos de SlickGrid
     totalValue: number = 0; // variable para almacenar el valor total
   
     columnDefinitions = [
       { id: 'id', name: 'ID', field: 'id' },
       { id: 'name', name: 'Name', field: 'name' },
       { id: 'value', name: 'Value', field: 'value', formatter: this.customFormatter },
     ];
   
     ngOnInit() {
       // Inicializa tus datos y configura tu grid como de costumbre...
   
       // Escucha los cambios en la columna "value"
       this.grid.onCellChange.subscribe(evt => {
         if (evt.column.id === 'value') {
           this.updateTotalValue();
         }
       });
   
       // Calcula el valor total inicial
       this.updateTotalValue();
     }
   
     // Función de formato personalizada para la columna "value"
     customFormatter(row, cell, value, columnDef, dataContext) {
       return `$${value.toFixed(2)}`;
     }
   
     // Función auxiliar para actualizar la variable de valor total
     updateTotalValue() {
       this.totalValue = this.data.reduce((sum, current) => sum + current.value, 0);
     }
   }
   

   En este ejemplo, comenzamos definiendo las columnDefinitions de SlickGrid como de costumbre, incluyendo una función de formato personalizada para la columna “value” que muestra el valor como una cantidad en dólares.

   Luego configuramos nuestro escuchador de eventos onCellChange para activar la función auxiliar updateTotalValue cada vez que se realiza un cambio en la columna “value”.

   La función updateTotalValue utiliza el método reduce para calcular la suma de todos los valores en la columna “value” y actualiza nuestra variable totalValue en consecuencia.

   Finalmente, llamamos a updateTotalValue una vez más en el gancho ngOnInit para calcular el valor total inicial.

   Con esta configuración, ahora deberías poder acceder a la variable totalValue desde cualquier lugar de tu componente o aplicación, y se actualizará automáticamente cada vez que se cambie un valor en la columna “value”.

Comments are closed.