英文:
AG grid infinite scroll by making api call in React
问题
AgGrid支持无限滚动，当滚动到底部时命中API以获取数据并将其附加到现有数据中，适用于React。我们是否具有实现虚拟化的能力，例如将接下来的10到20条记录加载到浏览器内存中，无需在呈现中引起延迟。并且在虚拟化期间应继续进行API调用。
英文:
Does AgGrid supports infinte scroll, and hit API when the scroll reaches to the bottom to fetch the data and append it to the existing data in react.
Do we have the capability to implement virtualization, like loading the next 10 to 20 records in the browser memory and load it without causing any delay in rendering. And the api call hitting should continue during virtualization.
答案1
得分: 1
在 grid-ready 方法中，AGGrid选项可以设置为服务器端数据源：
async onGridReady({ api }) {
this.api = api;
const getRows = this.getRows.bind(this);
api.setServerSideDatasource({ getRows });
},
然后在 getRows 方法中进行数据检索，同时需要处理在网格中设置的筛选和排序（在我的情况下是这样的）：
getRows(params) {
const request = {
filterAndSortData: this.filterAndSortData
};
this.getData(request)
.then(({ data }) => {
params.successCallback(data, data.lastRow);
})
.catch(() => params.failCallback());
},
您的数据可能会返回100条记录，然后 data.lastRow 将是总记录数，例如1000。因此，当用户向下滚动时，它将获取下一个100行。
英文:
Yes this is possible,
in the grid ready method, AGGrid options
grid-ready="onGridReady"
you can set server side data source
async onGridReady({ api }) {
this.api = api;
const getRows = this.getRows.bind(this);
api.setServerSideDatasource({ getRows });
},
then your getRows does your data retrieval and you will need to handle and filtering or sorting too that gets set in the grid (this is true in my case anyway)
getRows(params) {
const request = {
filterAndSortData: this.filterAndSortData
};
this.getData(request)
.then(({ data }) => {
params.successCallback(data, data.lastRow);
})
.catch(() => params.failCallback());
},
your data may return back 100 records and then the data.lastRow will be the number of total records available for example 1000. so then as the user scrolls down it will fetch the next 100 rows
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论