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

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;
              }
1
2
3
4
5
6
7
8

这里的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);
            },
           }
    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14

网站：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: `
        

            
        
    `,
  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 '';
            }
          },
        },
        { 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,
  },
});

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126

码字不易点个赞吧球球了