添加按钮并在 p-datatable 上选择列
add button and get column selected on p-datatable
我有一个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。我怎样才能实现它?
使用选择指令并将 selectionMode="single" [(selection)]="selectedRow"
添加到您的 p-dataTable
。
selectedRow
将包含您要选择的行的数据。将 rowIndex
发送到您的 SelectTest
方法,以便您知道必须将 test.TestDetails
的哪一项分配给 selectedRow
:
SelectTest(rowIndex) {
this.selectedRow = this.test.TestDetails[rowIndex];
}
我有一个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。我怎样才能实现它?
使用选择指令并将 selectionMode="single" [(selection)]="selectedRow"
添加到您的 p-dataTable
。
selectedRow
将包含您要选择的行的数据。将 rowIndex
发送到您的 SelectTest
方法,以便您知道必须将 test.TestDetails
的哪一项分配给 selectedRow
:
SelectTest(rowIndex) {
this.selectedRow = this.test.TestDetails[rowIndex];
}