¿Cómo seleccionar varias filas en el componente ng2-smart-table con casilla de verificación?

Solución:

1- Quiero seleccionar varias filas y llamar a una función, entonces, ¿dónde necesito escribir este código en ng2-smart-table?

Respuesta:

Para seleccionar varias filas en ng2-smart-table, debe agregar la configuración en su settings Objeto.

Ejemplo:

settings = {
    // This `selectMode` is the configuration for selecting multiple rows in the table using checkbox
    selectMode: 'multi',
    delete: {
      confirmDelete: true,

      deleteButtonContent: 'Delete data',
      saveButtonContent: 'save',
      cancelButtonContent: 'cancel'
    },
    add: {
      confirmCreate: true,
    },
    edit: {
      confirmSave: true,
    },
    columns: {
      // columns configuration
    },
  };

2- ¿Puedo seleccionar varias filas y llamar a una función en las filas seleccionadas?

ng2-smart-table tener un evento para conseguir userSelectedRows, podemos usar ese evento para obtener todas las filas seleccionadas y luego llamar a una función para hacer algo con todas las filas seleccionadas.

Ejemplo:

• Paso 1: agregue el controlador de eventos en la plantilla

<ng2-smart-table [settings]="settings" allowFiltering='true' allowPaging='true' [source]="windchillData" (deleteConfirm)="onDeleteConfirm($event)" (custom)="onCustomAction($event)" (edit)="onEdit($event)" (userRowSelect)="onUserRowSelect($event)"></ng2-smart-table> 

• Paso 2: crea un controlador de eventos en component.ts para obtener las filas seleccionadas

onUserRowSelect(event) {
    this.selectedRows = event.selected;
}

• Paso 3: botón Crear y llamar a una función para hacer algo con las filas seleccionadas

Botón en html

<button (click)="onClick()"> Get Selected </button>

Haga clic en el controlador en component.ts

onClick() {
    // It will console all the selected rows
    console.log(this.selectedRows);
  }

Aquí puede ver esto en funcionamiento: https://stackblitz.com/edit/example-ng2-smart-table-18qsws

No estoy muy familiarizado con esta biblioteca, pero lo siguiente debería ayudar:

html

<button (click)="logAllSelectedRows()">log All selected</button>
<ng2-smart-table [settings]="settings" [source]="source" (deleteConfirm)="onDeleteConfirm($event)" (rowSelect)="rowSelectedHandler($event)">

ts

  selectedRows = [];
  rowSelectedHandler(rowData:{isSelected:boolean, data:any}){
    if(rowData.isSelected === false){
      /*remove row*/
      this.selectedRows = this.selectedRows.filter((rowItem)=>rowItem .id !== rowData.data.id)
    }else {
      /*add row*/
      this.selectedRows = [...this.selectedRows, ...rowData.data];
      console.log('added rowdata');
    }
  }

  logAllSelectedRows(){
      console.log(this.selectedRows);
  }

En su ng2-smart-table ajustes ([settings]="settings"), agregue esta línea para habilitar la selección de más de una fila:

selectMode: 'multi',

Entonces, en tu plantilla, agregue el evento (userRowSelect) a su ng2-smart-table:

<ng2-smart-table [settings]="settings" allowFiltering='true' allowPaging='true' [source]="windchillData" (deleteConfirm)="onDeleteConfirm($event)" (custom)="onCustomAction($event)" (edit)="onEdit($event)" (userRowSelect)="onUserRowSelect($event)"></ng2-smart-table>

En tus componente, actualice la lista de filas seleccionadas en cada (userRowSelect):

private selectedRows: any;

// ...

onUserRowSelect(event) {
    this.selectedRows = event.selected;
}

Aún en el componente, agregue una función que haga lo que quiera con las filas seleccionadas:

public doSomething() {
    // Do something with `this.selectedRows`
}

Agregue un botón y llame a su función cuando haga clic en él.

<button (click)="doSomething()"> Run code on selected rows! </button>

---

---

Utiliza Nuestro Buscador