AG Grid:如何将滚动条停留在底部

时间:2019-03-24 20:32:29

标签: ag-grid ag-grid-angular

我正在使用AG Grid Angular创建一个日志视图,我每秒将向网格添加很多条目,通常这种类型的视图在底部具有最新的条目,因此如果有滚动将停留在底部的好方法,因此我始终可以看到最新的条目。如果我可以手动向上滚动并且滚动将保持在该位置,则将是一个奖励。

1 个答案:

答案 0 :(得分:1)

这里是一种方法:

在标记中处理rowDataChanged

<ag-grid-angular
  class="ag-dark"
  [rowData]="messages"
  [columnDefs]="columnDefs"
  [gridOptions]="gridOptions"
  (bodyScroll)="handleScroll($event)"
  (rowDataChanged)="handleRowDataChanged($event)">
</ag-grid-angular>

rowDataChanged的处理程序中,调用ensureVisibleIndex滚动到添加的最后一行:

  gridOptions: GridOptions = {
    suppressScrollOnNewData: true,
  }
  handleRowDataChanged(event) {
    const index = this.messages.length - 1;
    this.gridOptions.api.ensureIndexVisible(index, 'bottom');
  }

演示: https://stackblitz.com/edit/angular-ag-grid-stuck-to-bottom

在该代码中,围绕何时保持表格滚动到末尾还是不基于滚动位置有一些逻辑。