Question

我正在使用Primeng数据表来显示数据库中的可编辑条目。单击某行时，将显示一个新组件，以允许编辑该行的关联数据。单击新行时，组件将显示该行的数据，依此类推。

显然，这是独占的 - 一次只能选择一行。我想以不同的颜色突出显示当前“活动”的行，因此当选择新行时，任何以前高亮显示的行都应重置为其默认颜色。

目前我的模板中有以下内容：

  <p-dataTable [value]="rowData" [rowStyleClass]="highlightSelectedRow" [rowHover]="true" (onRowClick)="rowClick($event)">

    <ng-template ngFor let-col [ngForOf]="cols">
        <p-column [field]="col.field" [header]="col.header"></p-column>
    </ng-template>

  </p-dataTable>

......在我的组件中：

  rowClick($event){
     const rowData = $event.data;
     rowData.selected = !rowData.selected;
  // and do some other stuff...
  }

  highlightSelectedRow(rowData: any, rowIndex: number){
    return (rowData.selected) ? 'selected' : '';
  }

... CSS样式选定行：

.row.selected {
   background-color: red;
}

这可以突出显示点击的行，但突出显示的行仍然突出显示，我想知道重置它们的最佳方法。

我想我可以循环遍历所有数据行并找到selected属性设置为true的行并将其设置为false，但这似乎是一种相当低效的方法，特别是如果我正在处理有数千行数据。

我是否错过了使用Primeng更好的内置方式？

Answer 1

这可以突出显示点击的行，但突出显示的行仍然突出显示，我想知道重置它们的最佳方法。

为未选择的行创建一个类，例如

.row.unselected {
   background-color: white;
}

并在取消选择行时影响此类

highlightSelectedRow(rowData: any, rowIndex: number){
    return (rowData.selected) ? 'selected' : 'unselected';
}

有关详细信息，请参阅此类似SO question或Plunker。

Answer 2

我有这种情况：

HTML：

    <p-dataTable class="table table-responsive" #dealData [value]="dealList" sortMode="multiple"
                     [(selection)]="selectedDeals" 
                     dataKey="hncId" scrollable="true" scrollHeight="540px" [rowStyleClass]="highlightSelectedRow"
                     styleClass="table" [paginator]="true" [rows]="100" [pageLinks]="5">

....
        <p-column [header]="'Details' | translate" [style]="{'text-align': 'center'}">
                <ng-template let-row="rowData" pTemplate type="body">
                  <button type="button" (click)="showDealDetail(row)" (mouseover)="row.selected = !row.selected" (mouseout)="row.selected = !row.selected" class="viewButton" pButton
                          [label]="'View' | translate"></button>
                </ng-template>
              </p-column>
...
</p-dataTable>

组件：

highlightSelectedRow(rowData: any, rowIndex: number) {
    return (rowData.selected) ? 'rowSelected' : '';
  }

CSS：

tr.rowSelected > td {
  background-color: #ebf8ee !important;
}

这一次突出显示一行。密钥为(mouseover)和(mouseout)。

Angular 2 Primeng Datatable - 单击时单个（独占）行选择

2 个答案: