Question

我有10列的PrimeNG数据表。最后一列包含图像。点击图片后，我必须突出显示该行。

如果我添加选择模式＆＃39;单个＆＃39;在数据表中，单击行时会突出显示该行。我不要那个。我希望它仅在用户点击最后一列的图像时突出显示。

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

然后将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

如何在单击列中的图像时突出显示PrimeNG数据表行？

1 个答案: