如何在 ag-grid 中通过无限滚动在每个块的末尾进行 ajax 调用？

Question

我正在使用带有 angular 4 的 ag-grid。我使用无限滚动作为 rowModelType。但是由于我的数据很大，我们想在第一个 ajax 调用中先调用 100 条记录，当滚动到达末尾时，下一个 ajax 调用需要对接下来的 100 条记录进行调用？我如何使用 angular 中的 ag-grid 来做到这一点 4.

这是我当前的代码

table-component.ts

export class AssaysTableComponent implements OnInit{
 //private rowData;
 private gridApi;
 private gridColumnApi;
 private columnDefs;
 private rowModelType;
 private paginationPageSize;
 private components;
 private rowData: any[];
 private cacheBlockSize;
 private infiniteInitialRowCount;
 allTableData : any[];

 constructor(private http:HttpClient, private appServices:AppServices) {
   this.columnDefs = [
  {
    headerName: "Date/Time",
    field: "createdDate",
    headerCheckboxSelection: true,
    headerCheckboxSelectionFilteredOnly: true,
    checkboxSelection: true,
    width: 250,
    cellRenderer: "loadingRenderer"
  },
  {headerName: 'Assay Name', field: 'assayName', width: 200},
  {headerName: 'Samples', field: 'sampleCount', width: 100}

];

this.components = {
  loadingRenderer: function(params) {
    if (params.value !== undefined) {
      return params.value;
    } else {
      return '<img src="../images/loading.gif">';
    }
  }
};
this.rowModelType = "infinite";
//this.paginationPageSize = 10;
this.cacheBlockSize = 10;
this.infiniteInitialRowCount = 1;

//this.rowData = this.appServices.assayData;
 }

 ngOnInit(){
 }

 onGridReady(params) {
   this.gridApi = params.api;
   this.gridColumnApi = params.columnApi;
//const allTableData:string[] = [];

//const apiCount = 0;
//apiCount++;
console.log("assayApiCall>>",this.appServices.assayApiCall);
const assaysObj = new Assays();
assaysObj.sortBy = 'CREATED_DATE';
assaysObj.sortOder = 'desc';
assaysObj.count = "50";

if(this.appServices.assayApiCall>0){
  console.log("this.allTableData >> ",this.allTableData);
  assaysObj.startEvalulationKey = {
  }
}

this.appServices.downloadAssayFiles(assaysObj).subscribe(
  (response) => {
    if (response.length > 0) {
      var dataSource = {

        rowCount: null,
        getRows: function (params) {
          console.log("asking for " + params.startRow + " to " + params.endRow);
          setTimeout(function () {
            console.log("response>>",response);
            if(this.allTableData == undefined){
              this.allTableData = response;
            }
            else{
              this.allTableData = this.allTableData.concat(response);
            }
            var rowsThisPage = response.slice(params.startRow, params.endRow);
            var lastRow = -1;
            if (response.length <= params.endRow) {
              lastRow = response.length;
            }
            params.successCallback(rowsThisPage, lastRow);
          }, 500);
        }
      }
      params.api.setDatasource(dataSource);
      this.appServices.setIsAssaysAvailable(true);
      this.appServices.assayApiCall +=1;
    }
    else{
      this.appServices.setIsAssaysAvailable(false)
    }
  }
)
 }
}

我需要在 100 行末尾再次调用 this.appServices.downloadAssayFiles(assaysObj) 以获得下一组 100 行。

请推荐一种方法。

编辑 1：

    private getRowData(startRow: number, endRow: number): Observable<any[]> {
    var rowData =[];
    const assaysObj = new Assays();
    assaysObj.sortBy = 'CREATED_DATE';
    assaysObj.sortOder = 'desc';
    assaysObj.count = "10";
    this.appServices.downloadAssayFiles(assaysObj).subscribe(
      (response) => {
        if (response.length > 0) {
          console.log("response>>",response);
          if(this.allTableData == undefined){
            this.allTableData = response;
          }
          else{
            rowData = response;
            this.allTableData = this.allTableData.concat(response);
          }
          this.appServices.setIsAssaysAvailable(true);
        }
        else{
          this.appServices.setIsAssaysAvailable(false)
        }
        console.log("rowdata>>",rowData);

      });
    return Observable.of(rowData);
  }

  onGridReady(params: any) {
    console.log("onGridReady");
    var dataSource = {
      getRows: (params: IGetRowsParams) => {
        this.info = "Getting datasource rows, start: " + params.startRow + ", end: " + params.endRow;
        console.log(this.info);
        this.getRowData(params.startRow, params.endRow)
          .subscribe(data => params.successCallback(data));

      }
    };
    params.api.setDatasource(dataSource);
  }

结果 1：table 未加载数据。同样出于某种原因，服务调用 this.appServices.downloadAssayFiles 被调用了三次。我这里的逻辑有问题吗。

Answer 1

在 ag-grid 网站上有一个这样做的例子：https://www.ag-grid.com/javascript-grid-infinite-scrolling/。

您的代码目前如何运作？看起来您正在从 ag-grid 文档页面对您的模型进行建模，但您是一次获取所有数据，而不是仅获取您需要的数据块。

这是我认为可以满足您需要的 stackblitz。 https://stackblitz.com/edit/ag-grid-infinite-scroll-example?file=src/app/app.component.ts

一般来说，您希望确保您有一个可以检索正确数据块的服务方法。您似乎在代码中为网格设置了正确的数据范围，但问题是您已经花了很多精力来获取它的 all。

这是来自那个 stackblitz 的相关代码。 getRowData 是 returns 网格要求的记录的可观察服务调用。然后在该可观察对象的订阅方法中，将该数据提供给网格。

private getRowData(startRow: number, endRow: number): Observable<any[]> {
  // This is acting as a service call that will return just the
  // data range that you're asking for. In your case, you'd probably
  // call your http-based service which would also return an observable
  // of your data.
  var rowdata = [];
  for (var i = startRow; i <= endRow; i++) {
    rowdata.push({ one: "hello", two: "world", three: "Item " + i });
  }
  return Observable.of(rowdata);
}

onGridReady(params: any) {
  console.log("onGridReady");
  var datasource = {
    getRows: (params: IGetRowsParams) => {
      this.getRowData(params.startRow, params.endRow)
                .subscribe(data => params.successCallback(data));
    }
  };
  params.api.setDatasource(datasource);

}

如何在 ag-grid 中通过无限滚动在每个块的末尾进行 ajax 调用？

How to make ajax call on end of each block with infinite scrolling in ag-grid?

ajax

infinite-scroll

typescript

ag-grid

angular