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

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>

如果我点击按钮，该行应该自动获得 selected/highlighted。我怎样才能实现它？

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 上选择列

add button and get column selected on p-datatable

user-interface

angular5

primeng

primeng-datatable