ag-grid - Angular 数据网格：分组单元格渲染器

使用 Ag-Grid 中的分组单元格渲染器可以使您的分组单元格显示除默认之外的其它内容。当一个分组被打开或关闭时，渲染器将根据数据来更新显示内容。

例如，以下是一个简单的分组单元格渲染器示例，它显示每个分组的行数:

import { Component } from '@angular/core';
import { ICellRendererAngularComp } from 'ag-grid-angular';

@Component({
  selector: 'app-group-cell-renderer',
  template: '{{params.value + " (" + params.node.allChildrenCount + "行)"}}'
})
export class GroupCellRenderer implements ICellRendererAngularComp {
  params: any;

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

  refresh(): boolean {
    return false;
  }
}

在上面的示例中，{{params.value}} 表示该分组的值，params.node.allChildrenCount 是该分组所有子节点的行数。

使用该渲染器时，只需将其赋值给 gridOptions 的 groupRowRenderer 属性即可:

import { Component, OnInit } from '@angular/core';
import { GridOptions } from 'ag-grid';
import { GroupCellRenderer } from './group-cell-renderer.component';

@Component({
  selector: 'app-grid',
  template: `
  `
})
export class GridComponent implements OnInit {
  gridOptions: GridOptions;
  rowData: any[];
  columnDefs: any[];

  ngOnInit() {
    this.gridOptions = {
      groupRowRenderer: GroupCellRenderer
    };

    this.columnDefs = [
      { field: 'make', rowGroup: true },
      { field: 'model' },
      { field: 'price' }
    ];

    this.rowData = [
      { make: 'Toyota', model: 'Celica', price: 35000 },