如何禁用在 TurboTable 组件上取消选择行的选项？答案

【问题标题】：How to disable the option to deselect a row on TurboTable component?如何禁用在 TurboTable 组件上取消选择行的选项？
【发布时间】：2018-07-18 10:24:03
【问题描述】：

所以我有一个表格，其中包含在整个应用程序使用过程中填充的数据。当用户单击一行时，该行将突出显示，并且该行的数据填充在表格下方。我只想禁用用户取消选择行的选项（这是通过再次单击该行来完成的）。

代码：

<p-table #purchaseOrdersList
         [value]="purchaseOrders"
         selectionMode="single"
         [(selection)]="selectedPurchaseOrder"
         (onRowSelect)="onRowSelect($event)"
          >

<ng-template pTemplate="header">
    <tr>
      <th class="supplier-number-col">Supplier Number</th>
      <th class="supplier-name-col">Supplier Name</th>
      <th class="supplier-phone-col">Supplier Phone</th>
    </tr>
  </ng-template>

  <ng-template pTemplate="body" let-purchaseOrder>
    <tr [pSelectableRow]="selectedRow">
      <td>{{purchaseOrder.supplierNumber}}</td>
      <td>{{purchaseOrder.supplierName}}</td>
      <td>{{purchaseOrder.supplierPhoneNumber}}</td>
    </tr>
  </ng-template>

</p-table>

【问题讨论】：

您到底想做什么？用户单击列，列数据显示为选中状态。所以你想在用户选择行后停止选择或停止取消？
停止取消选择行。

标签： angular typescript primeng primeng-turbotable

【解决方案1】：

我有完全相同的问题，并想出了两个解决方案：一个非常简单的解决方案，一个稍微复杂的解决方案：

简单的解决方案：

tr.ui-state-highlight {
    pointer-events: none;
}

这将防止再次单击任何选定的行，从而防止取消选择。

但是，这也会阻止双击该行。所以如果需要双击，可以使用如下方案：

稍微复杂一点的解决方案：

将以下属性添加到 p-table：(onRowUnselect)="cancelUnselect($event)"，然后在您的组件中执行：

private _selectedPurchaseOrder: any;

get selectedPurchaseOrder() {
    return this._selectedPurchaseOrder;
}

set selectedPurchaseOrder(value: any) {
    if (value) {
        this._selectedPurchaseOrder = value;
    } else {
        this.purchaseOrdersList.selection = this._selectedPurchaseOrder;
    }
}

cancelUnselect(event) {
        this.purchaseOrdersList.selection = event.data;
}

这将防止在所有情况下取消选择行，并且仍然可以双击。

【讨论】：

如何访问 purchaseOrdersList？我认识到该表标有#purchaseOrdersList 但如何在 ts 代码中访问它？
@max 这本身就是一个新问题，但是您应该将 ViewChild 注释添加到局部变量中，如下所示：@ViewChild('purchaseOrdersList') purchaseOrdersList: any
很好的答案，虽然有一些缺点，尤其是第一个。通过关闭指针事件，排序会受到影响。您可以单击排序按钮并查看按升序排列的行，但您无法再次单击它。至于第二个，正如我遇到的那样，如果再次单击该行，则保留突出显示，但是如果您有分页和翻页并返回原始页面，则突出显示消失（如果您有修复或者您认为我有错误，请随时与我联系）。

【解决方案2】：

这现在可以通过 metaKeySelection 选项解决。将其设置为 true 将仅在保留元键时允许取消选择行。

【讨论】：

这不是真正的解决方案；仍然可以取消选择该行。此外，它不适用于触摸设备，因为 metaKeySelection 在那里自动关闭。
我找到了合适的解决方案！看看我的回答。

【解决方案3】：

我正在使用 PrimeNG 9.1，并且必须按如下方式调整 HammerNL 的解决方案以防止行取消选择：

cancelUnselect(event) {
    this.purchaseOrdersList.selection = event.data;
    this.purchaseOrdersList.selectionChange.emit(event.data);
    this.purchaseOrdersList.updateSelectionKeys();
  }

如果您使用表的“dataKey”属性，则需要 updateSelectionKeys

【讨论】：

【解决方案4】：

<p-table #purchaseOrdersList
         [value]="purchaseOrders"
         selectionMode="single"
         [(selection)]="selectedPurchaseOrder"
         (onRowSelect)="onRowSelect($event)"  (onRowUnselect) = "onRowUnselect()"
          >

<ng-template pTemplate="header">
    <tr>
      <th class="supplier-number-col">Supplier Number</th>
      <th class="supplier-name-col">Supplier Name</th>
      <th class="supplier-phone-col">Supplier Phone</th>
    </tr>
  </ng-template>

  <ng-template pTemplate="body" let-purchaseOrder>
    <tr [pSelectableRow]="selectedRow">
      <td>{{purchaseOrder.supplierNumber}}</td>
      <td>{{purchaseOrder.supplierName}}</td>
      <td>{{purchaseOrder.supplierPhoneNumber}}</td>
    </tr>
  </ng-template>

</p-table>

在.ts文件中可以用作

onRowUnselect() {

        var selectedCount = this.selectedPurchaseOrder.length;

        //  this.isDeleteShow = (selectedCount >0);
        $(".PATotalRowsSelected").html("(" + selectedCount + " selected)");

    }

【讨论】：