1

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

4

3 回答 3

3

有一个名为“ 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;
}
于 2019-05-21T16:24:50.117 回答
1

深入后，我找到了解决这个问题的完美方法。

请注意这里我用的是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')
            }
        },
于 2021-03-25T12:06:30.753 回答
1

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

首先，定义你的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了这个例子，javascript例子对于

于 2019-03-13T10:23:50.300 回答