Question

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

代码：

<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>

Answer 1

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

Answer 2

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

简单解决方案：

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;
}

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

Answer 3

<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)");

    }

Answer 4

我使用的是PrimeNG 9.1，必须调整HammerNL的解决方案，以防止行取消选择：

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

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

updateSelectionKeys是必需的

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

4 个答案: