열의 이미지를 클릭하면 primeng datatable 행을 강조 표시하는 방법은 무엇입니까?

Question

나는 10 열로 primatable 데이터 있습니다. 마지막 열에는 이미지가 포함되어 있습니다. 이미지를 클릭 할 때 행을 강조 표시해야합니다.

데이터 테이블에 '단일'선택 모드를 추가하면 행을 클릭하면 행이 강조 표시됩니다. 나는 그것을 원하지 않는다. 사용자가 마지막 열에서 이미지를 클릭 할 때만 강조 표시하고 싶습니다.

누구든지 저에게 어떻게하는지 알려주십시오. 당신이해야 할 무엇

<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

는 관련 행의 속성을 토글 이미지에 click 이벤트를 설정하는 것입니다. 그 속성을 isSelected라고 부르 자.

이미지 컬럼에 대한 귀하의 HTML 코드는

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

은 그럼이 isRowSelected

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

isRowSelected 함수가 반환됩니다 이름을하자, 함수를 호출 할 당신의 p-dataTable에 rowStyleClass PrimeNG 속성을 추가됩니다 행을 선택했는지 또는 선택하지 않았는지에 따라 클래스 이름

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

마지막으로

,이 두 CSS 클래스를 생성 : rowSelected와 여기

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

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

rowUnselected는 작업 Plunker

입니다