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

时间:2020-08-14 04:11:39

标签: angular ag-grid-angular

在[服务器端模型分页] [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/

0 个答案:

没有答案