我在 Ag-Grid 相关代码之外更新我的数据。我有一个变量 ,this.works
它为我的投资组合经理项目存储所有用户的“投资组合”。我this.loadMore()
从服务器加载了更多数据(我无权访问,这就是我从外部加载数据的原因)。
我正在使用“无限”行模型进行无限滚动。我开始使用数据源是因为我也想使用排序和过滤。
问题是当我更新数据源时,滚动会重置到顶部。这是非常烦人的行为。
使用 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 个左右的项目)。因此,每次获取新数据时,我都需要“刷新”数据源。