AG Grid: как приклеить прокрутку внизу

Я использую AG Grid Angular для создания представления журнала, я буду добавлять много записей в секунду в сетку, обычно у этого типа представления самая новая запись внизу, поэтому было бы здорово, если бы был хороший способ где прокрутка будет оставаться внизу, поэтому я всегда могу видеть последнюю запись. Бонусом будет, если я могу вручную прокрутить вверх, и прокрутка останется в этой позиции.


ag-grid ag-grid-angular
person Pudelduscher    schedule 24.03.2019    source источник
comment
См. Как спросить, покажите нам, что вы пробовали до сих пор. Узнайте, как создать минимальный воспроизводимый пример. Поделитесь своим кодом на plunk или stackblitz   -  person Paritosh    schedule 25.03.2019

Ответы (1)


arrow_upward
2
arrow_downward

Вот один из способов сделать это:

обработать 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

В этом коде также есть некоторая логика относительно того, когда следует прокручивать таблицу до конца или нет, в зависимости от позиции прокрутки.

person inorganik    schedule 19.04.2019