angular - Hvordan deaktivere muligheten til å fjerne valget av en rad i TurboTable-komponenten?

Så jeg har en tabell med data som fylles ut gjennom bruken av applikasjonen. Når en bruker klikker på en rad, blir raden uthevet og radens data fylles ut under tabellen. Jeg vil bare deaktivere muligheten for at brukeren kan avvelge en rad (dette gjøres ved å klikke på raden igjen).

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

Jeg hadde det nøyaktig samme spørsmålet, og kom opp med to løsninger: en veldig enkel en, og en litt mer kompleks løsning:

Enkel løsning:

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

Dette vil forhindre at en valgt rad blir klikket på igjen, og dermed forhindre fravalg.

Dette vil imidlertid også forhindre dobbeltklikk på raden. Så hvis du trenger dobbeltklikk, bruk følgende løsning:

Litt mer kompleks løsning:

Legg til følgende attributt i p-tabellen: (onRowUnselect)="cancelUnselect($event)", og deretter gjør du følgende i komponenten din:

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

Dette vil forhindre fravalg av en rad i alle tilfeller, og dobbeltklikk er fortsatt mulig.

Svar #2

Jeg bruker PrimeNG 9.1 og måtte tilpasse HammerNLs løsning som følger for å forhindre fravalg av rader:

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

updateSelectionKeys er nødvendig hvis du bruker tabellens "dataKey"-egenskap

Relaterte artikler