Ag-Grid 重置新数据源上的滚动条

Question

我在 Ag-Grid 相关代码之外更新我的数据。我有一个变量 this.works，它存储我的投资组合管理器项目的所有用户 "portfolio"。我有 this.loadMore() 从服务器加载更多数据（我无权访问，这就是我从外部加载数据的原因）。

我正在使用 "infinite" 行模型来实现无限滚动。我开始使用数据源是因为我也想使用排序和过滤。

问题是当我更新数据源时，滚动会重置到顶部。这是非常烦人的行为。

使用 Ag-Grid 社区和 Vue.js。

GridOptions（在beforeMount()中设置）

  this.gridOptions = {
    suppressScrollOnNewData: true,
    rowSelection: 'single',
    rowModelType: 'infinite',
    deltaRowDataMode: true,
    defaultColDef: {
      sortable: false,
      resizable: true
    },
    columnTypes: {
      'imageColumn': {
        width: 150,
        sortable: false,
        autoHeight: true,
        cellRendererFramework: AgGridImageFormatter
      },
      'priceColumn': {
        cellRendererFramework: AgGridPriceFormatter
      }
    }
  };

方法：

({
  methods: {
    onBodyScroll: function(event) {
      var lastDisplayedWork, ref, worksCount;
      worksCount = this.works.length;
      lastDisplayedWork = (ref = this.gridOptions.api) != null ? ref.getLastDisplayedRow() : void 0;
      if (worksCount - 2 < lastDisplayedWork) {
        event.api.ensureIndexVisible(worksCount - 2);
        this.loadMore();
        return event.api.setDatasource(this.gridDatasource);
      }
    },
    CreateAgGridDataSource: function(worksData) {
      return {
        rowCount: this.works.length,
        getRows: (function(_this) {
          return function(params) {
            var lastRow, rowsThisPage;
            rowsThisPage = _this.works.slice(params.startRow, params.endRow);
            lastRow = -1;
            return params.successCallback(rowsThisPage, lastRow);
          };
        })(this)
      };
    },
    onRowSelected: function(event) {
      return this.workClicked(event.data.id);
    },
    onGridReady: function(event) {
      this.gridDatasource = this.CreateAgGridDataSource(this.works);
      return event.api.setDatasource(this.gridDatasource);
    }
  }
});

对于任何奇怪的 JS 代码表示歉意，我正在使用 CoffeeScript 到 JS 转换器。不过我觉得应该没问题。

HTML:

<div id="gridContainer">
    <ag-grid-vue class="ag-theme-balham" id="AgGrid" :gridOptions="gridOptions" :modules="agGridModules" :columnDefs="agGridColDefs" @body-scroll="onBodyScroll" @row-selected="onRowSelected" @grid-ready="onGridReady"></ag-grid-vue>
</div>

如何确保滚动条停留在用户滚动到的位置？作为记录，使用 api.refreshCells() 不起作用。这样我在第一次数据调用后得到空白行（因此只显示前 ~23 个左右的项目）。因此，每次获取新数据时，我都需要 "refresh" 数据源。

Answer 1

这不是适合所有人的答案，但我的公司继续购买了 Enterprise Ag-Grid。这让我可以访问服务器端行模型，这反过来又让您有机会只呈现某些行。我可以在数据源提取中模拟服务器提取，然后只呈现返回的行。这对我们来说已经足够了，因为我们有许可证——我认为社区版不可能实现这种事情。

Answer 2

这很好用：

gridOptions.api.refreshInfiniteCache()

Ag-Grid 重置新数据源上的滚动条

Ag-Grid resets scroll on new datasource

javascript

coffeescript

vue.js

ag-grid

ag-grid-vue