使用aggird组件实现下滑请求分页从而实现无限滚动的效果

aggird组件是一款强大的表格展示组件，无论后端返回多少数据，它可以只展示用户看到的条数，这样就提升了流畅度提升了用户体验。
但是当数据过多时，后端一次性返回所有数据会使得接口请求时间变慢，从而产生等待。那么后端一般解决这种问题都是做一个分页，前端传递pagesize和pageindex来分批请求数据。所以问题在于我们如何使用aggird表单组件实现下滑请求分页从而实现无限滚动的效果。
官网上提出了两种解决方案，一种是无限滚动（企业版需要money），一种是无限行方案，这里我简单阐述一下无线行方案。
以下是官网的例子和地址，具体参数什么意思去官网看。那可能大家就有疑问了，去官网看你这篇博客有什么意义呢。
官网上的例子的无限行虽然也是无线行的效果，但是它是一次请求回来所有的数据，然后再分块加载。虽然看着是滚动分页的效果，但是其实还是一次行请求后端大量的数据。没有实现后端要的分页请求的效果，所以我们要在这个列子的基础上进行改造

从官网得知getRows每次网格需要更多行时，会调用getRows方法，我自己也在控制台看到每次滚动到底部时就调用getRows方法。所以我们可以从这一点做文章，在getRows里调用接口，每次滑动到底部就调用一次接口，从而实现无线滚动的效果
好了，现在思路有了，剩下的就是搞清楚getRows里面的参数都是什么意思，我们可以在示例中看到

 const { startRow,endRow } =paramsconst rowsThisPage = data.slice(startRow,endRow)// const rowsThisPage = data.sstartRowlice(params.startRow, params.endRow);// if on or after the last page, work out the last row.let lastRow = -1;if (data.length <= endRow) {lastRow = data.length;}

这里的starrRow和endRow是截取行数的起始点和终止点，它们的范围由cacheBlockSize 来控制。rowsThisPage 是显示的行的块，data是返回的数据是数组格式，lastRow是最后一行，当它为-1时，模块会一直加载，所以要判断data.length 是否小于endRow，如果小于说明数组的数据到头了，没数据了，这时候我们就把最后一行设置为数组的长度。

经过上面的说明。我们弄清楚了getRow里面的逻辑，现在我们来实现滚动分页，代码太多，大家的场景也可能不同，我就说一下思路。我们在vue定义startRow，endRow，pagesize,pageindex,和后端返回的data，我设定的是返回一次请求返回100个数据，我们在外面请求一次数据，把返回的数据赋值给data。设定pagesize=1，pageindex=100，startRow=0，endRow=10，截取的范围是10条，然后在getRow里面让this.startRow+=10，this.endRow+=10，this.pagesize++通过vue的双向绑定原理实现startRow，endRow，pagesize动态变化，重点来了，当我们的endRow为100时，就触发了判断

if (data.length <= endRow) {if(data.length<100){// 这种情况是返回的数据不足100条了，意味着后端数据到头了lastRow = data.length;}else{//当我们第一页滚动到头了，就让分页加1，并进行请求，这样我们就获取到了下一页数据，然后this.startRow=0，this.endRow=10也进行重置，这样就接着滑动，实现了滚动分页的效果this.startRow=0this.endRow=10this.pagesize++fetch('https://www.ag-grid.com/example-assets/olympic-winners.json').then((data) => this.data=data);},}}

网站：https://www.ag-grid.com/vue-data-grid/infinite-scrolling/
官网示例

import 'ag-grid-community/styles/ag-grid.css';
import 'ag-grid-community/styles/ag-theme-alpine.css';
import { AgGridVue } from 'ag-grid-vue';
import Vue from 'vue';const VueExample = {template: `<div style="height: 100%"><ag-grid-vuestyle="width: 100%; height: 100%;"class="ag-theme-alpine":columnDefs="columnDefs"@grid-ready="onGridReady":rowBuffer="rowBuffer":rowSelection="rowSelection":rowModelType="rowModelType":cacheBlockSize="cacheBlockSize":cacheOverflowSize="cacheOverflowSize":maxConcurrentDatasourceRequests="maxConcurrentDatasourceRequests":infiniteInitialRowCount="infiniteInitialRowCount":maxBlocksInCache="maxBlocksInCache"></ag-grid-vue></div>`,components: {'ag-grid-vue': AgGridVue,},data: function () {return {columnDefs: [{headerName: 'ID',maxWidth: 100,valueGetter: 'node.id',cellRenderer: (params) => {if (params.value !== undefined) {return params.value;} else {return '<img src="https://www.ag-grid.com/example-assets/loading.gif">';}},},{ field: 'athlete', minWidth: 150 },{ field: 'age' },{ field: 'country', minWidth: 150 },{ field: 'year' },{ field: 'date', minWidth: 150 },{ field: 'sport', minWidth: 150 },{ field: 'gold' },{ field: 'silver' },{ field: 'bronze' },{ field: 'total' },],gridApi: null,columnApi: null,defaultColDef: {flex: 1,resizable: true,minWidth: 100,},rowBuffer: null,rowSelection: null,rowModelType: null,cacheBlockSize: null,cacheOverflowSize: null,maxConcurrentDatasourceRequests: null,infiniteInitialRowCount: null,maxBlocksInCache: null,};},created() {this.rowBuffer = 0;this.rowSelection = 'multiple';this.rowModelType = 'infinite';this.cacheBlockSize = 100;this.cacheOverflowSize = 2;this.maxConcurrentDatasourceRequests = 1;this.infiniteInitialRowCount = 1000;this.maxBlocksInCache = 10;},methods: {onGridReady(params) {this.gridApi = params.api;this.gridColumnApi = params.columnApi;const updateData = (data) => {const dataSource = {rowCount: undefined,getRows: (params) => {console.log(111)// At this point in your code, you would call the server.// To make the demo look real, wait for 500ms before returningsetTimeout(function () {// take a slice of the total const { startRow,endRow } =paramsconst rowsThisPage = data.slice(startRow,endRow)// const rowsThisPage = data.sstartRowlice(params.startRow, params.endRow);// if on or after the last page, work out the last row.let lastRow = -1;if (data.length <= endRow) {lastRow = data.length;}// call the success callbackparams.successCallback(rowsThisPage, lastRow);}, 500);},};console.log(3,dataSource)params.api.setDatasource(dataSource);};fetch('https://www.ag-grid.com/example-assets/olympic-winners.json').then((resp) => resp.json()).then((data) => updateData(data));},},
};new Vue({el: '#app',components: {'my-component': VueExample,},
});

码字不易点个赞吧球球了

使用aggird组件实现下滑请求分页从而实现无限滚动的效果相关推荐

vue-infinite-scroll无限滚动组件
该组件主要用于滚动到底部后自动触发v-infinite-scroll绑定的方法,通过该方法来请求新数据然后渲染页面,实现无限滚动的效果.如果是element-plus 的项目,可以直接使用v-infi ...
【ElementUI】InfiniteScroll 无限滚动组件在部分浏览器中滚动失效的解决方案
ElementUI 官网 InfiniteScroll 使用:https://element.eleme.cn/#/zh-CN/component/infiniteScroll 首先先叙述一下需求,说 ...
Vue2.0+SVG实现音乐播放圆形进度条组件，传入实时百分比实现圆圈进度动画效果
vue2.0+SVG实现音乐播放圆形进度条组件,传入实时百分比实现圆圈进度动画效果需求分析: 类似于大多数音乐播放器中等mini播放器控制按钮,显示播放进度,实时更新进度. progress-cir ...
基于 Vue.js 的移动端组件库mint-ui实现无限滚动加载更多
通过多次爬坑,发现了这些监听滚动来加载更多的组件的共同点, 因为这些加载更多的方法是绑定在需要加载更多的内容的元素上的, 所以是进入页面则直接触发一次,当监听到滚动事件之后,继续加载更多, 所以对于无 ...
解决Element的 InfiniteScroll 无限滚动组件报错
问题: 使用Element的 InfiniteScroll 无限滚动组件,代码正常,但是控制台还是会有报错: vue.esm.js?efeb:628 [Vue warn]: Error in dire ...
【Vue.js】Vue.js组件库Element中的图片、回到顶部、无限滚动和抽屉
1.Image 图片图片容器,在保留原生img的特性下,支持懒加载,自定义占位.加载失败等. 基础用法可通过fit确定图片如何适应到容器框,同原生 object-fit. <div clas ...
使用Element的 InfiniteScroll 无限滚动组件报错
一.问题描述在使用Element的InfiniteScroll 无限滚动时候出现以下错误: TypeError: Failed to execute 'observe' on 'MutationOb ...
Element UI - v-infinite-scroll无限滚动组件
一.v-infinite-scroll无限滚动组件使用详解 1.v-infinite-scroll="load" //load无限滚动加载的方法2.infinite-scroll- ...
【独立版】智慧城市同城V4_2.1.1全开源全插件+VUE前端，修复平台装修公告组件风格二和风格三无法自动滚动的问题
源码介绍 [独立版]智慧城市同城V4_2.1.1全开源全插件+VUE前端,修复平台装修公告组件风格二和风格三无法自动滚动的问题! 智慧城市同城是一套专注于多城市生活服务同城技术解决方案,全面覆盖同堿信 ...

使用aggird组件实现下滑请求分页从而实现无限滚动的效果

使用aggird组件实现下滑请求分页从而实现无限滚动的效果相关推荐

最新文章

热门文章