web-dev-qa-db-fra.com

Réorganisez les rangées de la table avec le glisser-déposer du matériau angulaire

Angular 7 a apporté le puissant DragDropModule: https://material.angular.io/cdk/drag-drop/examples

La documentation traite de la réorganisation d'éléments dans des listes ou du transfert d'éléments entre plusieurs listes. Cependant, il ne parle pas de tables.

Je me demandais s'il existait un moyen confortable d'utiliser le système de glisser-déposer d'un matériau angulaire pour réorganiser les lignes dans mat-table ou cdk-table. 

(Vous pouvez ajouter cdkDropList à mat-table, ce qui permet au mécanisme de fonctionner, mais sans toutes les animations fantaisistes et les espaces réservés par défaut pour les déplacements.)

Existe-t-il quelque chose comme une valeur par défaut facile à mettre en œuvre pour trier les lignes d'un tableau par glisser-déposer?

Merci de votre aide :)

angulardrag-and-dropangular-materialmat-table
4
David Brem

Le style est fait par CSS (regardez l'onglet CSS sur la page d'exemple). Je l'ai modifié pour qu'il fonctionne avec mat-table:

.cdk-drag-preview {
  box-sizing: border-box;
  border-radius: 4px;
  box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2),
              0 8px 10px 1px rgba(0, 0, 0, 0.14),
              0 3px 14px 2px rgba(0, 0, 0, 0.12);
}

.cdk-drag-placeholder {
  opacity: 0;
}

.cdk-drag-animating {
  transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
}

.cdk-drop-list-dragging .mat-row:not(.cdk-drag-placeholder) {
  transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
}

Je l'ai placé dans mon fichier principal styles.scss.

Pour ceux qui se demandent comment implémenter le glisser-déposer sur une table mat, vous devez:

  1. Ajouter cdkDropList à mat-table
  2. Ajouter (cdkDropListDropped)="onListDrop($event)" à mat-table
  3. Ajouter cdkDrag à mat-row

onListDrop ressemblera à quelque chose comme: 

onListDrop(event: CdkDragDrop<string[]>) {
  // Swap the elements around
  moveItemInArray(this.myArray, event.previousIndex, event.currentIndex);
}

moveItemInArray est une fonction Matériau angulaire. Vous pouvez l'importer.

3
Lee Gunn

Exemple trouvé https://stackblitz.com/edit/angular-igmugp

Regarde la partie manquante est

this.table.renderRows();
1
Grebets Kostyantyn

sa ne fonctionne pas pour la table mat, pouvez-vous poster une réponse plus décrite ou tout morceau de code

0
Smriti Jha