如何使制表键跳过prime-ng中单元格可编辑p表中的某些单元格/列

Question

我需要一个单元格可编辑表格，其中键盘导航将跳过某些单元格，但如果用户单击它们，我需要这些单元格是可编辑的。

有 3 列。当用户从列中的最后一个可编辑字段中跳出时，我想添加一个新行，并将编辑器放在新行的第三个可编辑列中。跳过第 1 行和第 2 行。但他们仍然可以返回并编辑它们。

• 我尝试过使用 tabindex，但它什么也没做。
• 我尝试以 viewChildren 的身份访问 editableColumns，但是直到选项卡处理程序之后，新行的可编辑列才真正以这种方式存在。
• 还注意到使用editableColumn.openCell() 的工作，但是表格的样式变得有趣，并且单元格没有真正集中。

任何有关如何使用 prime-ng 的表 API 完成此操作的提示将不胜感激。

Answer 1

你可以在第三列的input模板上处理keydown事件，像这样

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

在 ts 文件中，通过最简单的方式或您自己的方式添加新行并聚焦到第三个单元格

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

我创建了一个演示 here。希望对您有所帮助