При загрузке таблицы PrimeNG ленивая загрузка не работает должным образом - PullRequest
Новая
       13

При загрузке таблицы PrimeNG ленивая загрузка не работает должным образом

1 голос
/ 18 июня 2019

Мы используем компонент PrimeNG <p-table> с virtualScroll = true & lazy = true.Но это не работает в следующем сценарии.

Предположим, что всего имеется 100 записей, а ограничение равно 10. Пользователь прокручивает и видит элемент со смещением 50, щелкает элемент и переходит к деталям.страница этого пункта.Теперь, когда пользователь нажимает кнопку «Назад» браузера, мне нужно вернуть его на ту же страницу, которую он просматривал в <p-table>, для этого я устанавливаю свойство [first] = 50, и оно показывает правильную страницу, но когда я прокручиваю событието, что испускается, содержит смещение 10 вместо 60, почему?

1 Ответ

2 голосов
/ 25 июня 2019

Когда вы используете [first]="50", вы вырезаете свои данные из первых 50 элементов.Я бы предложил вместо этого отслеживать таблицу scrollTop смещение и хранить ее, например, в локальном хранилище или каком-либо другом сервисе.Затем, когда вы вернетесь к представлению таблицы, просто восстановите scrollTop в теле прокрутки таблицы.

Вот несколько уродливых примеров того, как это сделать (прокрутите до некоторого смещения и вызовите перезагрузку страницы)

ngAfterViewInit() {
  const scrollableBody = this.table.containerViewChild.nativeElement.getElementsByClassName('ui-table-scrollable-body')[0];
  // listen for scrollTop changes
  scrollableBody.onscroll = (x) => {
    localStorage.setItem('scrollTop', scrollableBody.scrollTop);
  }
}

loadItemsLazy(event: any) {
  // immitated lazy data load
  setTimeout(() => {
    if (this.datasource) {
      this.items = this.datasource.slice(event.first, (event.first + event.rows));
    }
    // we need change scrollableBody.scrollTop
    // check some condition for doing it after returning from edit or something
    if (this.restoreOffset) {
      setTimeout(() => {
        const scrollableBody = this.table.containerViewChild.nativeElement.getElementsByClassName('ui-table-scrollable-body')[0];
        // restore last known offset
        scrollableBody.scrollTop = Number.parseInt(localStorage.getItem('scrollTop')) || 0;
      });
    }
  }, 2000); // some random data load time
}
...