angular - Välj rader i PrimeNG-tabell med tangenttryckning

Jag arbetar med en PrimeNG-tabell och försöker markera raden av en pSelectableRow genom tangenttryckning.

Jag har ett globalt sökfält som kommer att filtrera alla resultat i tabellen, och när användaren är klar med att söka vill jag att de ska kunna klicka på en knapp på tangentbordet och få raden markerad från de filtrerade alternativen.

För närvarande, om en användare söker och inmatningsrutan har fokus, kan de trycka på tab, men de måste trycka 5 gånger för att komma ner till första raden (mer om det finns fler kolumner).

Är det möjligt att välja ett raden-element inom app-komponenten via TypeScript eller annan metod där vid ett knapptryck skulle den första raden väljas? Sedan, förstås, kan användaren trycka på enter för att faktiskt välja raden. Upp- och nerpilarna fungerar när raderna är aktiva, men du måste först komma till raderna.

Jag har ställt in en snabbtangentfunktion i min app så att f1-tangenten utlöser en händelse:

this.addShortcut({ keys: 'f1' }).subscribe(() => {
  this.showMessage();
  console.log(this.table.value);
});

Detta visar ett meddelande från PrimeNG:s meddelandetjänst för att säkerställa att snabbtangenten fungerar, och det loggar också värdet av tabellen till konsolen. Jag har tittat igenom table och det verkar inte finnas något sätt att välja en rad. Jag har försökt att sätta this.table.selection=this.table.value[1] och detta lagrar [1]-arrayelementet som det "valda värdet", men det väljer faktiskt inte något objekt från tabellen.

Finns det ett bättre sätt att göra detta på? För enkelhetens skull i den kod som krävs för att göra detta reproducerbart på StackOverflow, har jag istället inkluderat en stackblitz. Här är en stackblitz.

Svar #1

Om du lägger till [(selection)]="selectedProduct" (onFilter)="onFilter($event, dt)" i din tabelldeklaration i din komponent, då kan du hantera ditt tabellval varje gång användaren gör en sökning på detta sätt:

onFilter(event, dt) {
    if (event.filteredValue.length > 0) {
      this.selectedProduct = event.filteredValue[0]; // set first visible row as selected
    }
  }

Se StackBlitz

Är det det du letar efter?

Redigera:

Okej, jag hoppas att jag har förstått ditt behov. Jag har lagt till tre HostListener för att navigera genom de filtrerade uppgifterna och utföra en åtgärd när Enter-tangenten trycks:

  @HostListener('keydown.ArrowUp', ['$event']) ArrowUp($event: KeyboardEvent) {
    if (this.cpt > 0) {
      this.cpt--;
    }
    this.selectedProduct = this.visibleProducts[this.cpt];
  }

  @HostListener('keydown.ArrowDown', ['$event']) ArrowDown(
    $event: KeyboardEvent
  ) {
    if (this.cpt < this.visibleProducts.length - 1) {
      this.cpt++;
    }
    this.selectedProduct = this.visibleProducts[this.cpt];
  }

  @HostListener('keydown.Enter', ['$event']) Enter($event: KeyboardEvent) {
    alert('opening product: ' + this.selectedProduct.name);
  }

Och nu ser onFilter-metoden ut så här:

  onFilter(event, dt) {
    this.cpt = 0;
    if (event.filteredValue.length > 0) {
      this.selectedProduct = event.filteredValue[0];
      this.visibleProducts = event.filteredValue;
    }
  }

Relaterade artiklar