1

我在 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];
}

有任何想法吗？谢谢！

4

2 回答 2

6

更新：添加演示

你只需要使用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>
于 2019-01-08T15:54:36.330 回答
0

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

我正在使用 Angular 11 和 PrimeNg 11。我使用以下内容滚动到表格的底部/最后一行。要求是在将新记录添加到表中时向下滚动到最后一条记录（通过反应式表单将记录提交到后端，然后作为记录创建的结果获取最新添加的记录。）

我发现 API 调用scrollTo()效果很好。这是一个带有可滚动区域的预加载（非延迟加载）表

模板片段

<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 文件的片段

  1. 使用获取表的句柄@ViewChild()

    @ViewChild('vsTable') vsTable:Table;

  2. 在事件处理程序或向表中添加记录的方法中，如果您想滚动到该表的底部以查看最新添加的记录，请使用以下代码

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

在您的事件处理程序中，就像一个按钮

于 2021-09-12T07:06:15.727 回答