Question

我有一个p-datatable如下

<p-dataTable [(value)]="test.TestDetails" [paginator]="true" [rows]="3" [rowsPerPageOptions]="[3,6,9]">
<p-column header="Test1" field="test1"></p-column>
<p-column header="Test2" field="test2"></p-column>
<p-column header="Test3" field="test3"></p-column>
<p-column header="Test4" field="test4" ></p-column>

<p-column  >
  <ng-template let-TestDetails="rowData" pTemplate="body">
    <button  type="button" class="ui-button-reset-transparent" pButton (click)="SelectTest()"  ></button>
  </ng-template>
</p-column>

</p-dataTable>

如果单击该按钮，则应自动选择/突出显示该行。我怎样才能实现它？

Answer 1

使用选择指令并将selectionMode="single" [(selection)]="selectedRow"添加到p-dataTable。

selectedRow将包含您要选择的行的数据。将rowIndex发送到您的SelectTest方法，以便您知道必须将test.TestDetails分配给selectedRow的哪个项目：

SelectTest(rowIndex) {
  this.selectedRow = this.test.TestDetails[rowIndex];
}

请参阅Plunker

添加按钮并在p-datatable上选择列

1 个答案: