带有ag-grid角形前端和python烧瓶后端的服务器端分页

在[服务器端模型分页] [1]中提供了ag-grid文档示例。 它说

请求中的startRow和endRow属性由 服务器执行分页

但是在代码中我找不到startRow。 这是组件:

import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { ServerSideRowModelModule } from '@ag-grid-enterprise/server-side-row-model';
import { MenuModule } from '@ag-grid-enterprise/menu';
import { ColumnsToolPanelModule } from '@ag-grid-enterprise/column-tool-panel';
import '@ag-grid-community/core/dist/styles/ag-grid.css';
import '@ag-grid-community/core/dist/styles/ag-theme-alpine-dark.css';

@Component({
    selector: 'my-app',template: `
    <ag-grid-angular
     #agGrid
     style="width: 100%; height: 100%;"
     id="myGrid"
     class="ag-theme-alpine-dark"
     [modules]="modules"
     [columnDefs]="columnDefs"
     [defaultColDef]="defaultColDef"
     [rowModelType]="rowModelType"
     [pagination]="true"
     [paginationPageSize]="paginationPageSize"
     [cacheBlockSize]="cacheBlockSize"
     [animateRows]="true"
     [rowData]="rowData"
     (gridReady)="onGridReady($event)"></ag-grid-angular>
     `,})
    export class AppComponent {
       private gridApi;
       private gridColumnApi;

       public modules: Module[] = [
           ServerSideRowModelModule,MenuModule,ColumnsToolPanelModule,];
      private columnDefs;
      private defaultColDef;
      private rowModelType;
      private paginationPageSize;
      private cacheBlockSize;
      private rowData: [];

      constructor(private http: HttpClient) {
        this.columnDefs = [
            {
                 field: 'id',maxWidth: 75,},{
                 field: 'athlete',minWidth: 190,{ field: 'age' },{ field: 'year' },{ field: 'gold' },{ field: 'silver' },{ field: 'bronze' },];
       this.defaultColDef = {
           flex: 1,minWidth: 90,resizable: true,};
       this.rowModelType = 'serverSide';
       this.paginationPageSize = 10;
       this.cacheBlockSize = 10;
      }

     onGridReady(params) {
            this.gridApi = params.api;
            this.gridColumnApi = params.columnApi;

this.http
  .get(
    'https://raw.githubusercontent.com/ag-grid/ag-grid/master/grid-packages/ag-grid- 
    docs/src/olympicWinners.json'
  )
  .subscribe(data => {
    var idSequence = 1;
    data.forEach(function(item) {
      item.id = idSequence++;
    });
    var fakeServer = new FakeServer(data);
    var datasource = new ServerSideDatasource(fakeServer);
    params.api.setServerSideDatasource(datasource);
      });
    }
  }

 function ServerSideDatasource(server) {
     return {
        getRows: function(params) {
        console.log('[Datasource] - rows requested by grid: ',params.request);
        var response = server.getData(params.request);
        setTimeout(function() {
              if (response.success) {
                  params.successCallback(response.rows,response.lastRow);
              } else {
                  params.failCallback();
        }
       },200);
     },};
  }

我的理解是:gridReady事件触发onGridReady方法,将事件作为参数传递,该方法在我们称为“参数”的方法中。 “参数”包含请求。但是请求如何获取startRow?

这是FakeServer代码

// This fake server uses http://alasql.org/ to mimic how a real server
// might generate sql queries from the Server-Side Row Model request.
// To keep things simple it does the bare minimum to support the example.
function FakeServer(allData) {
  alasql.options.cache = false;

  return {
    getData: function(request) {
      var results = executeQuery(request);

      return {
        success: true,rows: results,lastRow: getLastRowIndex(request,results),};
    },getCountries: function() {
      var sql = 'SELECT disTINCT country FROM ? ORDER BY country ASC';

      return alasql(sql,[allData]).map(function(x) {
        return x.country;
      });
    },};

  function executeQuery(request) {
    var sql = buildsql(request);

    console.log('[FakeServer] - about to execute query:',sql);

    return alasql(sql,[allData]);
  }

  function buildsql(request) {
    return (
      'SELECT * FROM ?' +
      wheresql(request) +
      orderBysql(request) +
      limitsql(request)
    );
  }

  function wheresql(request) {
    var whereParts = [];
    var filterModel = request.filterModel;

    if (filterModel) {
      Object.keys(filterModel).forEach(function(columnKey) {
        var filter = filterModel[columnKey];

        if (filter.filterType === 'set') {
          whereParts.push(
            columnKey + " IN ('" + filter.values.join("','") + "')"
          );
          return;
        }

        console.log('unsupported filter type: ' + filter.filterType);
      });
    }

    if (whereParts.length > 0) {
      return ' WHERE ' + whereParts.join(' AND ');
    }

    return '';
  }

  function orderBysql(request) {
    var sortModel = request.sortModel;

    if (sortModel.length === 0) return '';

    var sorts = sortModel.map(function(s) {
      return s.colId + ' ' + s.sort.toupperCase();
    });

    return ' ORDER BY ' + sorts.join(',');
  }

  function limitsql(request) {
    var blockSize = request.endRow - request.startRow;

    return ' LIMIT ' + (blockSize + 1) + ' OFFSET ' + request.startRow;
  }

  function getLastRowIndex(request,results) {
    if (!results || results.length === 0) {
      return request.startRow;
    }

    var currentLastRow = request.startRow + results.length;

    return currentLastRow <= request.endRow ? currentLastRow : -1;
  }
}

哪个事件在网格排序上被触发?
[1]:https://www.ag-grid.com/javascript-grid-server-side-model-pagination/

相关文章

功能概要:(目前已实现功能)公共展示部分:1.网站首页展示...
大体上把Python中的数据类型分为如下几类: Number(数字) ...
开发之前第一步,就是构造整个的项目结构。这就好比作一幅画...
源码编译方式安装Apache首先下载Apache源码压缩包,地址为ht...
前面说完了此项目的创建及数据模型设计的过程。如果未看过,...
python中常用的写爬虫的库有urllib2、requests,对于大多数比...