我正在使用primeng的新p-table组件。我的第一列是冻结的,每行包含三个按钮。其他列是动态生成的,简单的文本输出。 Primeng在自己的html表中生成标题,正文和冻结列。如果我点击冻结列中的一个按钮,我想通过我的表的指令#tableCol
(不确定它是否是一个指令)来获取整行,并突出显示它,但我只得到冻结的列行。
突出显示在rowDeletionMark(tableCol)
方法中。
如何在“主”表中获取实际数据/行所在的行?
我的表格:
<p-table #dt [columns]="header" [value]="data" [resizableColumns]="true" [frozenColumns]="frozenCols" [paginator]="true"
[rows]="10" [rowsPerPageOptions]="[10,20,30]" sortMode="multiple" [reorderableColumns]="true" class="ptable row-cancel"
[scrollable]="true" frozenWidth="150px">
<ng-template pTemplate="colgroup" let-columns>
<colgroup>
<col *ngFor="let col of columns" style="width:200px">
</colgroup>
</ng-template>
<ng-template pTemplate="header" let-columns>
<tr>
<th *ngFor="let col of columns" style="width:150px;font-size:13px" pResizableColumn pReorderableColumn
[pSortableColumn]="col.field !== 'ACTION' ? col.field : null">
{{col.field}}
</th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-rowData let-columns="columns" let-rowIndex="rowIndex">
<tr>
<td #tableCol *ngFor="let col of columns" height="48" style="width:150px;padding:0 5px 0 5px;line-height: 1;" [ngStyle]="getRowMarking(rowData)"
pEditableColumn>
<div *ngIf="col.field === 'ACTION'">
<button pButton type="button" class="row-btn" icon="fa fa-fw fa-save"></button>
<button pButton type="button" class="row-btn ui-button-danger" icon="fa fa-fw fa-eraser" (click)="rowDeletionMark(tableCol)"></button>
<button pButton type="button" class="row-btn ui-button-info" icon="far fa-clock-o" (click)="showRowHistory(rowData)"></button>
</div>
<div *ngIf="col.editable && col.field !== 'ACTION'">
<p-cellEditor>
<ng-template pTemplate="input">
<input type="text" [(ngModel)]="data[col.field]">
</ng-template>
<ng-template pTemplate="output">
{{rowData[col.field]}}
</ng-template>
</p-cellEditor>
</div>
<div *ngIf="!col.editable">
{{rowData[col.field]}}
</div>
</td>
</tr>
</ng-template>
</p-table>
突出显示方法:
rowDeletionMark(tableCol) {
tableCol.className += ' canceled';
}