如何使Tab鍵跳過prime-ng中可編輯單元格表中的某些單元格/列

Question

我需要一個單元格可編輯表，鍵盤導航將跳過某些單元格，但是如果用戶單擊它們，則需要這些單元格是可編輯的。

有3列。 當用戶從列的最后一個可編輯字段中跳出時，我要添加新行，並將編輯器放在新行的第3個可編輯列中。 跳過第1行和第2行。但是他們仍然可以返回並進行編輯。

• 我已經嘗試過使用tabindex，但是它什么也沒做。
• 我嘗試以viewChildren的身份訪問editableColumns，但是直到選項卡處理程序之后，這種新行的可編輯列才真正存在。
• 還已經注意到，使用editableColumn.openCell（）可以完成一些工作，但是隨后表格的樣式變得很有趣，並且單元格並不是真正的焦點。

對於如何使用prime-ng中的表API完成此操作的任何提示將不勝感激。

Answer 1

您可以在第3列的input模板上處理keydown事件，如下所示

<ng-template pTemplate="input">
<input pInputText type="text" [(ngModel)]="rowData.field_3" (keydown.tab)="onTabPress($event, i)">
</ng-template>

並在ts文件中，以最簡單的方式或通過您的方式將新行添加到第3個單元格並聚焦

onTabPress(e, i) {
    if (i == this.data.length - 1) {
      this.data.push({
        field_1: '',
        field_2: '',
        field_3: ''
      });
      setTimeout(() => {
        $('tr').eq(i + 2).find('td').eq(2).click();
      });
    }
  }

我在這里創建了一個演示。 希望這個幫助