Question

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

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

这是我当前的代码：

标题组件：

object

标题组件模板：

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>

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);
    }
  }
}

Answer 3

简单的解决方案

全选：

gridApi.forEachNode(node => {
  node.setSelected(true);
});

取消全选

gridApi.forEachNode(node => {
  node.setSelected(false);
});

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

3 个答案: