如何将两个数据表内容的滚动同步在一起（ag-grid）

Posted 2023-03-28

【中文标题】如何将两个数据表内容的滚动同步在一起（ag-grid）

【英文标题】：How do I synchronize the scroll of two data table contents together (ag-grid)

【发布时间】：2020-07-09 04:53:27

【问题描述】：

我在 Angular 中使用 ag-grid，我希望有两个数据表 (ag-grid) 一个在另一个之下。

当我在表1或表2中滚动时，两个数据表的内容应该一起移动。即两个数据表的滚动应该同步。

相同的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 的情况下尝试了类似的场景并且它的工作原理相同。以下是我尝试过的 POC：

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

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

【参考方案1】：

Ag-grid 具有与您完全相同的要求的对齐网格。对齐网格不仅会同步滚动，还会同步列顺序、宽度和可见性。

根据文档 -

对齐两个或多个网格意味着列将保持对齐 网格。换句话说，列更改为一个网格（列宽， 列顺序，列可见性等）反映在另一个网格中。 如果您有两个网格，这很有用，一个在另一个之上，这样 他们的列是垂直对齐的，你想保留这些列 对齐。

你应该可以这样做 -

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

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

    // other grid options here
    ...

详细示例here

【讨论】：

这个我已经经历过了。对齐的网格将有助于两个垂直对齐的网格之间的水平滚动同步。但我需要水平和垂直滚动同步。需要此功能才能根据年份比较两个网格中的数据。感谢您的更新。如果有任何解决方案，请更新。