Как синхронизировать прокрутку содержимого двух таблиц данных вместе (ag-grid) - PullRequest
Новая
       6

Как синхронизировать прокрутку содержимого двух таблиц данных вместе (ag-grid)

0 голосов
/ 28 марта 2020

Я использую ag-grid в Angular и хочу, чтобы две таблицы данных (ag-grid) находились одна под другой.

Содержание обеих таблиц данных должно перемещаться вместе, когда я делаю прокрутку в таблице 1 или таблице 2. То есть прокрутка обеих таблиц данных должна быть синхронизирована.

The HTML для того же, что и ниже: 

<div>
<div id="grid-wrapper">
    <ag-grid-angular #agGrid1 id="myGrid1" class="ag-theme-balham" [columnDefs]="columnDefs"
        [defaultColDef]="defaultColDef" [rowData]="rowData"></ag-grid-angular>
</div>
<div id="grid-wrapper">
    <ag-grid-angular #agGri2 id="myGrid2" class="ag-theme-balham" [columnDefs]="columnDefs"
        [defaultColDef]="defaultColDef" [rowData]="rowData"></ag-grid-angular>
</div>
</div>

Код компонента: 

this.agGrid1._nativeElement.onscroll = function() {
  this.agGrid2._nativeElement.scrollTop=this.agGrid1._nativeElement.scrollTop;
}
this.agGrid2._nativeElement.onscroll = function() {
  this.agGrid1._nativeElement.scrollTop=this.agGrid2._nativeElement.scrollTop;
}

Я пробовал сценарий в stackblitz . Но я не смог добиться успеха. Но попробовал подобный сценарий в случае двух div и его работы для того же самого. Ниже приведен PO C, который я пробовал:

https://stackblitz.com/edit/angular-ag-grid-common-scroll?file=src%2Fapp%2Fapp.component.ts

https://angular-ag-grid-common-scroll.stackblitz.io

1 Ответ

0 голосов
/ 29 марта 2020

Ag-grid имеет выровненные сетки для того же требования, что и у вас. Выравнивание сеток будет не только синхронизировать прокрутку, но и порядок столбцов, ширину и видимость.

Согласно документам -

Выравнивание двух или более сеток означает, что столбцы будут оставаться выровненными во всех сетках , Другими словами, изменения столбца в одной сетке (ширина столбца, порядок столбцов, видимость столбца и т. Д. c) отражаются в другой сетке. Это полезно, если у вас есть две сетки, одна над другой, так что их столбцы выровнены по вертикали, и вы хотите, чтобы столбцы были выровнены.

Вы должны быть в состоянии сделать это следующим образом - 

gridOptionsFirst = {
    // some grid options here
        ...
};

gridOptionsSecond = {
    // register first grid to receive events from the second
    alignedGrids: [gridOptionsFirst]

    // other grid options here
    ...
}

Подробный пример здесь

...