我正在尝试在ag-Grid中实现服务器端分页,每次单击下一个/上一个按钮时,我都会进行SOAP调用。我已经用特定的页码实现了该功能,因此我可以检索行数据并将其传递给Grid。有什么好的例子吗?
解决方案整天挖掘 ag-grid 库后,我终于找到了
首先让我们在GridOptions中包含以下选项;
GridOptions :
gridOptions:GridOptions = {分页:true, rowModelType:'infinite', cacheBlockSize:20,//您可以拥有自定义页面大小 paginationPageSize:20 //页面大小};
GridReady CallBack
准备好网格后,设置一个数据源,例如
onGridReady(params:any){ this.gridApi = params.api; this.gridApi.setDatasource(this.dataSource)//将dataSource替换为数据源}
数据源对象:当转到下一页时,ag-grid调用dataSource对象,从而获取数据。
getRows 函数为您提供特定页面的开始和结束索引。
params.successCallback :它带有两个参数,第一个与页面相关的数据,第二个是 totalRecords 。 Ag-grid使用第二个参数来确定总页数。
dataSource:IDatasource = { getRows:(参数:IGetRowsParams)=> { //使用startRow和endRow将分页发送到后端 // params.startRow:起始页 // params.endRow:结束页 //将this.apiService替换为可返回Observable 的后端调用this.apiService()。subscribe(response => { params.successCallback( response .data,response.totalRecords ); })} }
Api服务示例:这是我使用的示例api服务
apiService(){返回this.httpclient.get('raw.githubusercontent/ag-grid /ag-grid/master/packages/ag-grid-docs/src/olympicWinners.json')}我已在 GitHub 上上传了此示例。
I'm trying to implement a server side pagination in ag-Grid where I'll make a SOAP call each time I click on the next/previous button. I have already implemented the function with the specific page number so I can retrieve my row data and pass it to the Grid. Any good examples on how to do that? Thanks in advance.
解决方案After digging ag-grid Library for the whole day , I finally found the solution.
First Lets include the following options in our GridOptions;
GridOptions :
gridOptions: GridOptions = { pagination: true, rowModelType: 'infinite', cacheBlockSize: 20, // you can have your custom page size paginationPageSize: 20 //pagesize };
GridReady CallBack
After the Grid is ready, Set a datasource e.g
onGridReady(params: any) { this.gridApi = params.api; this.gridApi.setDatasource(this.dataSource) // replace dataSource with your datasource }
Data Source Object : dataSource object is called by ag-grid when you go to next page and thus fetches data.
getRows functions provides you with start and end index of the particular page.
params.successCallback : It takes two arguments, first the data related to page and second is totalRecords. Ag-grid uses the second parameter to decide total pages.
dataSource: IDatasource = { getRows: (params: IGetRowsParams) => { // Use startRow and endRow for sending pagination to Backend // params.startRow : Start Page // params.endRow : End Page //replace this.apiService with your Backend Call that returns an Observable this.apiService().subscribe(response => { params.successCallback( response.data, response.totalRecords ); }) } }
Example Api Service : This is an example api service that i have used
apiService() { return this.httpclient.get('raw.githubusercontent/ag-grid/ag-grid/master/packages/ag-grid-docs/src/olympicWinners.json') }
I have uploaded this example on GitHub.
更多推荐
Ag Grid服务器端分页
发布评论