Сделать заголовки столбцов ag-Grid «липкими» под заголовком страницы Ionic-3? - PullRequest
Новая
       22

Сделать заголовки столбцов ag-Grid «липкими» под заголовком страницы Ionic-3?

0 голосов
/ 16 января 2019

Я пробую ag-Grid и пытаюсь поместить простую сетку на страницу. Я не могу понять, как прикрепить просто заголовки столбцов к верхней части страницы, когда происходит прокрутка (по умолчанию, ion-content прокручивает все).

Пытались

а) Я пытался обернуть сетку в 

<div ion-fixed>

но это приводит к тому, что сетка не может быть прокручена вообще (вверх / вниз или влево / вправо).

b) Моя последняя попытка - получить прямой доступ к DOM и установить атрибут стиля 'top' напрямую в зависимости от количества окон scrollTop.

Это работает, но страдает низкой производительностью на iOS. Я думаю, что Android будет еще хуже. Если есть более элегантный и / или производительный способ сделать это, я бы с удовольствием изучил его.

  1. Я добавил обработчик событий ionScroll и перенаправил события прокрутки в соответствующий компонент (не удалось запустить обработчики прокрутки HostListener).
  2. Тогда ...

. 

ngAfterViewInit() {
    this.agHeader = document.querySelector('.ag-header');
    console.log(`Our header is: ${this.agHeader}`);
}

windowScrolled(event) {
    if (this.agHeader) {
        this.agHeader.style.top = `${event.scrollTop - 1}px`;
        this.agHeader.style.position = 'absolute';
    }
}

Просто установите позицию прямо на элементе контейнера 'ag-header'. Кажется, работает, но не знаю, будет ли он падать с разных устройств. Время тестировать!

код

https://github.com/scornflake/agGridIonic3Test.git

Я предполагаю, что это что-то «простое» сделать с помощью CSS? Или, может быть, пользовательский компонент заголовка?

...