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

Question

我在 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

Answer 1

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

根据文档 -

对齐两个或多个网格意味着列将在所有网格中保持对齐。 换句话说，对一个网格的列更改（列宽、列顺序、列可见性等）会反映在另一个网格中。 如果您有两个网格，一个在另一个之上，这样它们的列垂直对齐，并且您希望保持列对齐，这将很有用。

你应该可以这样做 -

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

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

    // other grid options here
    ...
}

详细例子在这里