angular - Hur man inaktiverar alternativet att avmarkera en rad i TurboTable-komponenten?

Så jag har en tabell med data som fylls på under användningen av applikationen. När en användare klickar på en rad markeras raden och radens data fylls i under tabellen. Jag vill bara inaktivera möjligheten för användaren att avmarkera en rad (detta görs genom att klicka på raden igen).

Koden:

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

Svar #1

Jag hade exakt samma fråga och kom fram till två lösningar: en väldigt enkel och en lite mer komplex lösning:

Enkel lösning:

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

Detta kommer att förhindra att någon vald rad klickas på igen, och därigenom förhindra avmarkering.

Men detta kommer också att förhindra dubbelklick på raden. Så om du behöver dubbelklick, använd följande lösning:

Lite mer komplex lösning:

Lägg till följande attribut till p-table: (onRowUnselect)="cancelUnselect($event)", och sedan i din komponent gör:

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

Detta förhindrar avmarkering av en rad i alla fall, och dubbelklickning är fortfarande möjlig.

Svar #2

Jag använder PrimeNG 9.1 och var tvungen att anpassa HammerNL:s lösning på följande sätt för att förhindra att rader avmarkeras:

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

updateSelectionKeys är nödvändig om du använder tabellens "dataKey"-egenskap

Relaterade artiklar