如何在角度4的ag-grid中选择无限行模型上的行？

Question

我使用了一个自定义的headerComponent在标题单元格中显示一个复选框，作为带有无限滚动行模型的ag-grid中的全选选项。单击复选框后，我需要能够选择/取消选择当前行块中表中的所有行。同样滚动到表的末尾，将进行服务器调用以获取下一组行。默认情况下，还应该选择加载的新数据。

我知道，ag-grid不支持在无限行模型中选择全部的标题选择。我如何以编程方式执行此操作？我也该如何获取所有选定的行。

这是我当前的代码：

标头组件：

import { Component, OnInit,ViewChild, ElementRef } from '@angular/core';
import {IHeaderParams} from "ag-grid/main";
import {IHeaderAngularComp} from "ag-grid-angular";

@Component({
  selector: 'app-customheader',
  templateUrl: './customheader.component.html',
  styleUrls: ['./customheader.component.css']
})
export class CustomheaderComponent implements IHeaderAngularComp{
  private params : any;

  agInit(params:any): void {
    console.log(params);
    this.params = params;
  }

  toggleSelectAll(){

  }

  constructor() { }
}

标头组件模板：

<div>
  <div *ngIf="params.displayName == ''" ><input type="checkbox" class="selectAllCheckBox" (click)="toggleSelectAll()"> </div>
  <div>{{params.displayName}}</div>
</div>

表组件：

constructor(public appServices:AppServices) {
    this.rowData = this.assayDataList;
    this.columnDefs = [
      {
        //headerCheckboxSelection: true,
        //headerCheckboxSelectionFilteredOnly: true,
        checkboxSelection: true,
        width: 40,
        headerComponentParams: CustomheaderComponent
      },
      {
        headerName: "Date/Time",
        field: "createdDate",
        width: 230
      },
      {headerName: 'Assay Name', field: 'assayName', width: 240},
      {headerName: 'Samples', field: 'sampleCount', width: 100}

    ];

    this.gridOptions = {
      rowSelection: 'multiple',
      cacheBlockSize: 30,
      //maxBlocksInCache: 2,
      enableServerSideFilter: false,
      enableServerSideSorting: false,
      rowModelType: 'infinite',
      paginationAutoPageSize: true,
      suppressRowClickSelection: true
      //suppressCellSelection: true
    };

    this.frameworkComponents = { agColumnHeader: CustomheaderComponent };

  }

Answer 1

也有这个问题，每个行节点都有一个回调函数forEachNode((node, index))，您可以循环遍历全选事件中的每个选择集。

 gridApi.forEachNode((row, index) => {
            gridApi.getRowNode(row.id).selectThisNode(true);
        });

Answer 2

我有一个解决方案来选择新的数据块。不确定如何将标记传播selectAll到CustomheaderComponent网格组件，因此只需假设您已经有权访问selectAll组件内部的标记即可回答。

当您获得新的数据块时，在调用 后successCallback，执行选择逻辑。

params.successCallback(rowsThisPage, this.count);
this.manageRecordsWithSelectAllFlag(rowsThisPage);

获取新记录的 id，获取RowNode然后使用RowNode.selectThisNode函数选择它。

private manageRecordsWithSelectAllFlag(rowsThisPage: any[]): void {
  let id;
  if(this.selectedAll) {
    for(let x = 0; x < rowsThisPage.length; x++) {
      id = rowsThisPage[x]['yourIdProperty'];
      this.gridApi.getRowNode(`${id}`).selectThisNode(this.selectedAll);
    }
  }
}