Use the aggird component to implement sliding request paging to achieve the effect of infinite scrolling

aggirdComponents is a powerful form show,No matter how many data backend back,It can only show the user see article number,Thus improve the fluency of improving the user experience.
但是当数据过多时,Backend one-time return all of the data will make interface request time slow,从而产生等待.So the back-end usually solve this problem is to do a page,前端传递pagesize和pageindexTo partial request data.So the question is how do we useaggirdForm component implementation falling demand paging so as to realize the infinite scroll effect.
Website puts forward two solutions,One is the infinite scroll（企业版需要money）,Is a kind of infinite line scheme,Here I briefly the line wireless solution.
The following is an example of a website and address,What do you mean go to website to see the specific parameters.That may be you have a question,Went to the website to see what's your meaning this blog.
Examples of website of infinite line is wireless line effect,But it is a request back all data,And then partitioned loading.Which is the effect of rolling paging,But the line is really a request back-end data.Do not implement the back-end to the effect of the paging request,So we're going to fit in this transformation on the basis of the

从官网得知getRowsEach time the grid needs more row,会调用getRows方法,I also see each scroll to the bottom in the console when you callgetRows方法.So we can from this exploit,在getRows里调用接口,Each slide to the bottom is called a interface,So as to realize wireless scrolling effect
好了,现在思路有了,剩下的就是搞清楚getRowsWhat is the meaning of the inside of the parameters are,We can see in the sample

 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和endRowIs the start and end points of intercepting line,They range fromcacheBlockSize 来控制.rowsThisPage Is to show the piece,dataIs the data returned is array format,lastRow是最后一行,当它为-1时,Module has been loaded,所以要判断data.length 是否小于endRow,If less than the end of the array of data,没数据了,This time we will take the last line is set to the length of the array.

经过上面的说明.我们弄清楚了getRow里面的逻辑,Now we come to realize scroll pages,代码太多,Everyone's scene may also be different,我就说一下思路.我们在vue定义startRow,endRow,pagesize,pageindex,And the back-end returneddata,I set is to return a request return100个数据,We request a data outside,把返回的数据赋值给data.设定pagesize=1,pageindex=100,startRow=0,endRow=10,截取的范围是10条,然后在getRow里面让this.startRow+=10,this.endRow+=10,this.pagesize++通过vueTwo-way binding principle to realizestartRow,endRow,pagesize动态变化,重点来了,当我们的endRow为100时,Triggered the judge

if (data.length <= endRow) {
    
          if(data.length<100){
    
           // This is a return to the insufficient data of100条了,Means the end of the back-end data
           lastRow = data.length;
           }else{
    
           //When we the end of the first page scrolling,Let the page to add1,并进行请求,So we can get to the next page data,然后this.startRow=0,this.endRow=10Also be reset,So then sliding,The effect of the realized scrolling page
           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,
  },
});

Code word is not easy to order a great ball ball