Comment mettre en surbrillance une ligne datable primaire sur un clic d'une image dans la colonne?

Question

J'ai primeng datatable avec 10 colonnes. La colonne last contient des images. Au clic de l'image je dois mettre en évidence la rangée.

Si j'ajoute le mode de sélection 'single' dans le datatable, sur un clic de ligne, il met en surbrillance la ligne. Je ne veux pas ça. Je veux qu'il soit mis en évidence seulement quand l'utilisateur clique sur l'image à la dernière colonne.

quelqu'un peut s'il vous plaît laissez-moi savoir comment faire cela?

<p-column> 
     <ng-template let-row="rowData" pTemplate type="body"> 
      <img src="assets/images/info_icon.jpg" style="height:20px;width:20px"> 
     </ng-template> 
    <p-column> 

Answer 1

Ce que vous devez faire est de définir un événement click sur l'image qui bascule une propriété de la ligne associée. Appelons cette propriété isSelected.

Votre code HTML pour votre colonne image devient

<p-column field="isSelected" header="" [style]="{'width':'32px','cursor': 'pointer'}"> 
    <ng-template pTemplate="body" let-rowData="rowData"> 
    <img src="https://image.flaticon.com/icons/svg/106/106705.svg" (click)="rowData.isSelected=!rowData.isSelected"/> 
    </ng-template> 
</p-column> 

Ensuite, ajoutez la rowStyleClass propriété PrimeNG à votre p-dataTable qui fera appel à une fonction, Appelons-isRowSelected

<p-dataTable [value]="cars" [rowStyleClass]="isRowSelected"> 

La fonction isRowSelected retournera un nom de classe, selon que vous avez sélectionné ou désélectionné la ligne

isRowSelected(rowData: any) { 
    return (rowData.isSelected) ? "rowSelected" : "rowUnselected"; 
} 

Enfin, la création de ces deux classes CSS: rowSelected et rowUnselected

tr.rowUnselected > td { 
    color: black; 
    background-color: white !important; 
} 

tr.rowSelected > td { 
    color: black; 
    background-color: #dff0d8 !important; 
} 

est ici un travail Plunker