当前位置:网站首页>使用aggird组件实现下滑请求分页从而实现无限滚动的效果

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

2022-08-06 07:47:35酌白楼

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

 const {
     startRow,endRow } =params
              const 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=0
           this.endRow=10
           this.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-vue style="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 returning
            setTimeout(function () {
    
              // take a slice of the total 
              const {
     startRow,endRow } =params
              const 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 callback
              params.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,
  },
});

码字不易点个赞吧球球了

原网站

版权声明
本文为[酌白楼]所创,转载请带上原文链接,感谢
https://blog.csdn.net/cmhahaha/article/details/126154567

随机推荐