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

Question

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

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

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

</p-table>

这是 'Add option' 处理程序：

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

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

或动画：

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

没有jquery:

TS:

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

HTML:

<p-table #table [columns]="cols" [value]="sales" [scrollable]="true" scrollHeight="200px"> ... </p-table>
<button (click)="scroll(table)">Scroll</button>

Answer 2

我来得太晚了，但我来这里是因为我想知道如何向下滚动到 PrimeNg table 中的最后一条记录。我应该仔细阅读整个文档。好吧，我在 documentation 本身找到了解决方案。

我正在使用 Angular 11 和 PrimeNg 11。我使用以下内容滚动到 table 的 bottom/last 行。要求是在将新记录添加到 table 时向下滚动到最后一条记录（通过反应形式将记录提交到后端，然后作为记录创建的结果返回最新添加的记录。 )

我发现 API 调用 scrollTo() 效果很好。这是一个带有可滚动区域

的预加载（非延迟加载）table

模板片段

<div class="page-content" style="height: calc(100vh - 100px);">
<p-table [value]="someDataArray" [rows]="lazyCaseComments.length"
           #vsTable [virtualScroll]="true"
           [scrollable]="true" 
           [totalRecords]="totalRecords" 
           scrollHeight="flex">
  ...
  ...
  </p-table>
  </div>

组件 .ts 文件的片段

使用 @ViewChild()
获取 table 的句柄
@ViewChild('vsTable') vsTable:Table;
在向 table 添加记录的事件处理程序或方法中，并且您想滚动到此 table 的底部以查看最新添加的记录, 使用以下代码

this.vsTable.scrollTo({bottom: 0, behavior:'smooth'});

在你的事件处理程序中像一个按钮

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

How to scroll to last row on a PrimeNG TurboTable component

primeng

angular

primeng-turbotable