如何在单击列中的图像时突出显示 PrimeNG 数据表行? [英] How to highlight a PrimeNG datatable row on click of an image in the column?
问题描述
我有 10 列的 PrimeNG 数据表.最后一列包含图像.单击图像时,我必须突出显示该行.
I have PrimeNG datatable with 10 columns. Last column contains images. On click of the image I have to highlight the row.
如果我在数据表中添加选择模式单一",单击行时它会突出显示该行.我不要那个.我希望它仅在用户单击最后一列的图像时突出显示.
If I add selection mode 'single' in the datatable, on click of row it highlights the row. I do not want that. I want it to be highlighted only when the user clicks on the image at the last column.
<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
.
What you have to do is to set a click
event on your image that will toggle a property of the associated row. Let's call that property isSelected
.
图像列的 HTML 代码变为
Your HTML code for your image column becomes
<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
Then add the rowStyleClass
PrimeNG property to your p-dataTable
which will call a function, let's name it isRowSelected
<p-dataTable [value]="cars" [rowStyleClass]="isRowSelected">
isRowSelected
函数将返回一个类名,具体取决于您是选择还是未选择该行
The isRowSelected
function will return a class name, depending on if you selected or unselected the row
isRowSelected(rowData: any) {
return (rowData.isSelected) ? "rowSelected" : "rowUnselected";
}
最后,创建这两个 CSS 类:rowSelected
和 rowUnselected
Finally, create these two CSS classes : rowSelected
and rowUnselected
tr.rowUnselected > td {
color: black;
background-color: white !important;
}
tr.rowSelected > td {
color: black;
background-color: #dff0d8 !important;
}
这是一个有效的 Plunker
这篇关于如何在单击列中的图像时突出显示 PrimeNG 数据表行?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!