在不选中复选框的情况下突出显示 primeng table 中的选定行
Highlight selected row in primeng table without checking the checbox
我正在使用 primeng p-table
和 p-checkbox
。我希望能够在不选中复选框的情况下突出显示单击的行(或行内容)。单击复选框本身而不是行时应选中复选框。
我尝试使用 [pSelectableRow]
,但除了突出显示它之外,它还会检查复选框。
<p-table [columns]="cols" [value]="brands" [(selection)]="selected" dataKey="vin">
<ng-template pTemplate="header" let-columns>
<tr>
<th style="width: 3em">
<p-tableHeaderCheckbox></p-tableHeaderCheckbox>
</th>
<th *ngFor="let col of columns">
{{col.header}}
</th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-rowData let-columns="columns">
<tr [pSelectableRow]="rowData">
<td>
<p-tableCheckbox [value]="rowData"></p-tableCheckbox>
</td>
<td *ngFor="let col of columns">
{{rowData[col.field]}}
</td>
</tr>
</ng-template>
</p-table>
如何只突出显示点击的行,而不勾选复选框?
我创建了一个 Stackblitz 示例。
在行
上添加一些class
<tr [pSelectableRow]="rowData" class="some-class">
然后在 css 中执行此操作
.some-class:hover {
background-color: some color... or put any style you need
}
我能够通过维护一个获取单击行值的变量 highlight
并将高亮显示 class 仅分配给该值等于单击行值的行来实现此目的。
<ng-template pTemplate="body" let-rowData let-columns="columns">
<tr class="some-class" [class.ui-state-highlight]="rowData === highlighted">
<td>
<p-tableCheckbox [value]="rowData"></p-tableCheckbox>
</td>
<td *ngFor="let col of columns">
<a (click)="highlighted = rowData"> {{rowData[col.field]}}</a>
</td>
</tr>
</ng-template>
已更新 Stackblitz here。
我正在使用 primeng p-table
和 p-checkbox
。我希望能够在不选中复选框的情况下突出显示单击的行(或行内容)。单击复选框本身而不是行时应选中复选框。
我尝试使用 [pSelectableRow]
,但除了突出显示它之外,它还会检查复选框。
<p-table [columns]="cols" [value]="brands" [(selection)]="selected" dataKey="vin">
<ng-template pTemplate="header" let-columns>
<tr>
<th style="width: 3em">
<p-tableHeaderCheckbox></p-tableHeaderCheckbox>
</th>
<th *ngFor="let col of columns">
{{col.header}}
</th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-rowData let-columns="columns">
<tr [pSelectableRow]="rowData">
<td>
<p-tableCheckbox [value]="rowData"></p-tableCheckbox>
</td>
<td *ngFor="let col of columns">
{{rowData[col.field]}}
</td>
</tr>
</ng-template>
</p-table>
如何只突出显示点击的行,而不勾选复选框? 我创建了一个 Stackblitz 示例。
在行
上添加一些class<tr [pSelectableRow]="rowData" class="some-class">
然后在 css 中执行此操作
.some-class:hover {
background-color: some color... or put any style you need
}
我能够通过维护一个获取单击行值的变量 highlight
并将高亮显示 class 仅分配给该值等于单击行值的行来实现此目的。
<ng-template pTemplate="body" let-rowData let-columns="columns">
<tr class="some-class" [class.ui-state-highlight]="rowData === highlighted">
<td>
<p-tableCheckbox [value]="rowData"></p-tableCheckbox>
</td>
<td *ngFor="let col of columns">
<a (click)="highlighted = rowData"> {{rowData[col.field]}}</a>
</td>
</tr>
</ng-template>
已更新 Stackblitz here。