ag-grid 是否有 onScroll 事件

Question

我正在 ag-grid 上寻找滚动事件，我想知道滚动何时到达末尾并加载下一组行，我知道如果您设置无限滚动模式，那么 ag-grid 会调用 getRows 方法，但在我的应用程序没有立即获得下一组行，我调用服务器，服务器向客户端发送一条单独的消息，其中包含新的行集

Answer 1

有一个名为“ onBodyScroll ”的网格事件，您可以将事件处理程序附加到它。

此事件有些秘密，因为它在版本 18 之前的 GridOptions 类型中不存在，尽管它确实有效。

请参阅此评论：https://github.com/ag-grid/ag-grid-enterprise/issues/89#issuecomment-264477535

他们在文档中确实有此事件：https ://www.ag-grid.com/javascript-grid-events/#miscellaneous

主体滚动事件

bodyScroll - 主体水平或垂直滚动​​。

onBodyScroll = (event: BodyScrollEvent) => void;
interface BodyScrollEvent {
    // Event identifier 
    type: string;
    api: GridApi;
    columnApi: ColumnApi;
    direction: ScrollDirection;
    left: number;
    top: number;
}

Answer 2

经过深入研究，我找到了解决这个问题的完美方法。

请注意这里我使用的是AngularJS，但是很容易理解。

onBodyScroll:function(params) {
            var bottom_px = $scope.gridOptions.api.getVerticalPixelRange().bottom;
            var grid_height = $scope.gridOptions.api.getDisplayedRowCount() * $scope.gridOptions.api.getSizesForCurrentTheme().rowHeight;
            if(bottom_px == grid_height)
            {
                alert('Bottom')
            }
        },

Answer 3

您应该能够按照下面的示例执行该操作（从服务器加载数据）。

首先，定义你的dataSource.

const dataSource: IServerSideDatasource = {
   getRows: (params: IServerSideGetRowsParams) => this._getRows(params, [])
};
this.gridApi.setServerSideDatasource(dataSource);

_getRows像这样声明方法。

private _getRows(params: IServerSideGetRowsParams, data: any[]) {

  this.gridApi.showLoadingOverlay();

  service.getData(params)  // the payload your service understands
   .subscribe((result: any[]) => {
       params.successCallback(result, -1);
       params.failCallback = () => console.log('some error occured while loading new chunk of data');
       this.gridApi.hideOverlay();
     },
      error => this._serverErrorHandler(error)
  );
}

这几乎是不言自明的。如果您有任何不清楚的地方，请告诉我。

顺便说一句，我用过typescript这个例子，这个例子与ag-grid-reactjavascript是一样的