Как перейти к последней строке в компоненте PrimeNG TurboTable

Я использую компонент PrimeNG TurboTable в приложении Angular 7, и есть кнопка для добавления в него новых строк. Проблема в том, что при добавлении новой строки пользователь должен прокрутить таблицу до конца, чтобы начать ее редактирование. Как я мог прокрутить до него?

Вот как я определяю таблицу в шаблоне:

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

Любые идеи? Спасибо!


angular primeng primeng-turbotable
person Fel    schedule 08.01.2019    source источник

Ответы (1)


arrow_upward
6
arrow_downward

ОБНОВЛЕНИЕ: добавьте демонстрацию

Вам нужно только использовать 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>
person phucnh    schedule 08.01.2019
comment
Привет! Я пытался избежать использования jQuery или прямого доступа к DOM, но спасибо за ваше предложение! - person Fel; 08.01.2019
comment
Это решение обращается к DOM напрямую, но это приемлемо, потому что я вижу, что у компонента нет никакого метода для выполнения этой операции. Спасибо! - person Fel; 08.01.2019
comment
Единственная проблема, с которой я столкнулся при использовании этого с Angular, - это вызов scrollTop до того, как пользовательский интерфейс был обновлен новой строкой. Как только я обернул scrollTop в setTimeout(() => {...}, 0), он исправил состояние гонки. - person Jacob Roberts; 20.03.2020