Wie kann man eine Priming Datatable durch Klicken auf ein Bild in der Spalte hervorheben?

Question

Ich habe primeng Datentabelle mit 10 Spalten. Letzte Spalte enthält Bilder. Beim Klicken auf das Bild muss ich die Zeile markieren.

Wenn ich den Auswahlmodus 'single' in der Datentabelle hinzufüge, wird beim Klicken auf die Zeile die Zeile hervorgehoben. Ich möchte das nicht. Ich möchte, dass es nur hervorgehoben wird, wenn der Benutzer auf das Bild in der letzten Spalte klickt.

kann jemand bitte lassen Sie mich wissen, wie das geht?

<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

Was Sie tun müssen, ist ein click Ereignis auf Ihrem Bild zu setzen, die eine Eigenschaft der zugehörigen Zeile wechseln wird. Nennen wir diese Eigenschaft isSelected.

Ihre HTML-Code für Ihre Bildspalte wird

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

Dann fügen Sie die rowStyleClass PrimeNG Eigenschaft auf Ihre p-dataTable, die eine Funktion aufrufen wird, wollen wir nennen es isRowSelected

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

Die isRowSelected Funktion zurückkehren ein Klassenname, abhängig davon, ob Sie die Zeile

ausgewählt oder nicht ausgewählt haben

Schließlich erstellen Sie diese beiden CSS-Klassen: rowSelected und rowUnselected

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

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

Hier ist ein funktionierendes Plunker