Question

我在Angular 7应用程序上使用PrimeNG TurboTable组件，并且有一个向其添加新行的按钮。问题在于，当添加新行时，用户必须向下滚动到表格底部才能开始对其进行编辑。我怎么滚动到它？

这是我在模板中定义表格的方式：

<p-table [value]="gridOptions" [scrollable]="true" scrollHeight="13em" 
selectionMode="single" [(selection)]="selectedOption" 
(onEditComplete)="onDataChanged($event)"
(onRowReorder)="onDataChanged($event)">
  [ ... ]

</p-table>

这是“添加选项”处理程序：

onAddOption() {
  // This adds a new option to the TurboTable
  this.gridOptions.push({ name: "", arg: "", comment: "", scope: this.scope });

  // I expected that selecting an option would scroll to it, but it doesn't work
  this.selectedOption = this.gridOptions[this.gridOptions.length-1];
}

有什么想法吗？谢谢！

Answer 1

更新：添加demo

您只需要使用javascript

view

或动画：

$('.ui-table-scrollable-body').scrollTop($('.ui-table-scrollable-body')[0].scrollHeight);

没有jquery：

TS：

$(".ui-table-scrollable-body").animate({ scrollTop: $('.ui-table-scrollable-body').prop("scrollHeight")}, 200

HTML：

scroll(table: Table) {
    let body = table.containerViewChild.nativeElement.getElementsByClassName("ui-table-scrollable-body")[0];
    body.scrollTop = body.scrollHeight;
  }

如何滚动到PrimeNG TurboTable组件的最后一行

1 个答案: