Angular 2 Primeng Datatable-单击时选择单（排他性）行答案

【问题标题】：Angular 2 Primeng Datatable- single (exclusive) row selection on clickAngular 2 Primeng Datatable-单击时选择单（排他性）行
【发布时间】：2017-11-13 15:15:02
【问题描述】：

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

显然，这是排他性的 - 一次只能选择一行。 I want to highlight the currently 'active' row in a different color, so when a new row is selected any previously hightlighted row should be reset to its default color.

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

  <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 执行此操作的更好的内置方法？

【问题讨论】：

标签： primeng-datatable

【解决方案1】：

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

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

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

并在您取消选择行时影响该类

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

查看这个类似的SO question 或Plunker 了解更多详情。

【讨论】：

我将此标记为正确，但后来意识到它实际上并没有回答问题； “...当您取消选择一行时影响此类” - 这要求该行主动取消选择。但我希望这在选择新行时自动发生！
哦好的...但是你不能使用单选模式selectionMode="single" 吗？

【解决方案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)。

【讨论】：