Comment sélectionner plusieurs lignes dans le composant ng2-smart-table avec la case à cocher?

Je ne connais pas très bien cette bibliothèque, mais ce qui suit devrait vous aider:

html

  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);
  }

ts

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

Dans les paramètres de votre ng2-smart-table ( [settings] = "settings" ), ajoutez cette ligne pour activer la sélection de plusieurs lignes:

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

Ensuite, dans votre modèle , ajoutez l'événement (userRowSelect) à votre ng2-smart-table:

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

Dans votre composant , mettez à jour la liste des lignes sélectionnées à chaque (userRowSelect):

private selectedRows: any;

// ...

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

Toujours dans le composant, ajoutez une fonction qui fait ce que vous voulez avec les lignes sélectionnées:

<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>

Ajoutez un bouton, et appelez votre fonction quand on clique dessus!

selectMode: 'multi',

1- Je souhaite sélectionner plusieurs lignes et appeler une fonction, alors où dois-je écrire ce code dans ng2-smart-table?

Réponse:

Pour sélectionner plusieurs lignes dans ng2-smart-table , vous devez ajouter une configuration dans votre objet settings .

Example:

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

2- Puis-je sélectionner plusieurs lignes et appeler une fonction sur les lignes sélectionnées?

ng2-smart-table ont un événement pour obtenir userSelectedRows , nous pouvons utiliser cet événement pour obtenir toutes les lignes sélectionnées, puis appeler une fonction pour faire quelque chose avec toutes les lignes sélectionnées.

Exemple:

• Étape 1: ajouter un gestionnaire d'événements dans le modèle

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

• Étape 2: Créez un gestionnaire d'événements dans component.ts pour obtenir les lignes sélectionnées

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

• Étape 3: créer un bouton et appeler une fonction pour faire quelque chose avec les lignes sélectionnées

Bouton dans html

<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> 

Cliquez sur le gestionnaire dans component.ts

XXX

Ici, vous pouvez le voir en fonctionnement: https : //stackblitz.com/edit/example-ng2-smart-table-18qsws