我具有10列的Primeng DataTable。最后一列包含图像。单击图像,我必须突出显示行。
如果我在数据表中添加选择模式"单",则单击行时,它突出显示了行。我不要那个。我希望仅在用户单击最后一列的图像时才突出显示。
<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>
您要做的就是在图像上设置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>
然后将rowStyleClass
Primeng属性添加到您的p-dataTable
,该属性将调用函数,让我们命名 isRowSelected
<p-dataTable [value]="cars" [rowStyleClass]="isRowSelected">
isRowSelected
函数将返回类名称,具体取决于您是否选择或未选择该行
isRowSelected(rowData: any) {
return (rowData.isSelected) ? "rowSelected" : "rowUnselected";
}
最后,创建这两个CSS类:rowSelected
和rowUnselected
tr.rowUnselected > td {
color: black;
background-color: white !important;
}
tr.rowSelected > td {
color: black;
background-color: #dff0d8 !important;
}
这是一个工作的plunker