如何在旋转AG网格的一列中添加按钮

Question

我在枢轴模式下使用ag网格： https://www.ag-grid.com/angular-data-grid/pivoting/ 我想在每行的末尾有一个图标，单击它并打开对话框。像这样的东西： https://blog.ag-grid.com/cell-renderers-in-ag-grid-every- Different-flavour/ 但在透视模式下我无法添加额外的列，我该怎么做？ 我的列定义是：

colDef: ColDef[] = [
  {field: 'name', rowGroup: true, width: 250, resizable: true, flex: 3, suppressSizeToFit: false},
  {
    field: 'period',
    pivot: true,
    enablePivot: true,
    pivotComparator: ascYearComparator,
  },
  {
    field: 'hValue',
    aggFunc: 'last',
    flex: 1,
    maxWidth: 80,
    minWidth: 50,
    valueFormatter: UtilsService.percentandNegativeFormatter,
    cellStyle: params => {
      if (params.value < 0) {
        return {color: '#DE4A55'};
      } else {
        return {color: '#323E54', opacity: '0.5'};
      }
    },
  },
  {
    field: 'adjustedValue',
    aggFunc: 'last',
    flex: 2,
    minWidth: 150,
    valueFormatter: UtilsService.negativeFormatterSet,
    cellStyle: params => {
      if (params.value < 0) {
        return {color: '#F7525F'};
      } else {
        return {color: '#323E54'};
      }
    },
  },
];

如有任何帮助，我们将不胜感激。

Answer 1

我们可以使用自动组列来实现此目的

使用单元渲染器功能定义新组件

btn-cell-renderer.component.ts

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

@Component({
  selector: 'btn-component',
  template: `
    <span>
      <span>{{ cellValue }}</span
      >&nbsp;
      <button (click)="buttonClicked()">Click me!</button>
    </span>
  `,
})
export class BtnCellRenderer implements ICellRendererAngularComp {
  public cellValue!: string;

  // gets called once before the renderer is used
  agInit(params: ICellRendererParams): void {
    this.cellValue = this.getValueToDisplay(params);
  }

  // gets called whenever the user gets the cell to refresh
  refresh(params: ICellRendererParams) {
    // set value into cell again
    this.cellValue = this.getValueToDisplay(params);
    return true;
  }

  buttonClicked() {
    alert(`${this.cellValue} was clicked`);
  }

  getValueToDisplay(params: ICellRendererParams) {
    return params.valueFormatted ? params.valueFormatted : params.value;
  }
}

app.module.ts

import { HttpClientModule } from '@angular/common/http';
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AgGridModule } from 'ag-grid-angular';
import { AppComponent } from './app.component';
import { BtnCellRenderer } from './btn-cell-renderer.component';

@NgModule({
  imports: [BrowserModule, HttpClientModule, AgGridModule],
  declarations: [AppComponent, BtnCellRenderer],
  bootstrap: [AppComponent],
})
export class AppModule {}

在你的 autoGroupColumnDef 属性中使用它

app.component.ts

import { HttpClient } from '@angular/common/http';
import { Component } from '@angular/core';
import { ColDef, GridReadyEvent } from 'ag-grid-community';
import 'ag-grid-community/styles/ag-grid.css';
import 'ag-grid-community/styles/ag-theme-alpine.css';
import 'ag-grid-enterprise';
import { IOlympicData } from './interfaces';
import { BtnCellRenderer } from './btn-cell-renderer.component';

@Component({
  selector: 'my-app',
  template: `<div style="display: flex; flex-direction: column; height: 100%;">
    <ag-grid-angular
      style="width: 100%; height: 100%;"
      class="ag-theme-alpine"
      [columnDefs]="columnDefs"
      [defaultColDef]="defaultColDef"
      [autoGroupColumnDef]="autoGroupColumnDef"
      [pivotMode]="true"
      [rowData]="rowData"
      (gridReady)="onGridReady($event)"
    ></ag-grid-angular>
  </div> `,
})
export class AppComponent {
  public columnDefs: ColDef[] = [
    { field: 'country', rowGroup: true, enableRowGroup: true },
    { field: 'sport', pivot: true },
    { field: 'year' },
    { field: 'date' },
    { field: 'gold', aggFunc: 'sum' },
    { field: 'silver', aggFunc: 'sum' },
    { field: 'bronze', aggFunc: 'sum' },
  ];
  public defaultColDef: ColDef = {
    flex: 1,
    minWidth: 150,
    sortable: true,
    resizable: true,
  };
  public autoGroupColumnDef: ColDef = {
    minWidth: 250,
    cellRenderer: BtnCellRenderer,
  };
  public rowData!: IOlympicData[];

  constructor(private http: HttpClient) {}

  onGridReady(params: GridReadyEvent<IOlympicData>) {
    this.http
      .get<IOlympicData[]>(
        'https://www.ag-grid.com/example-assets/olympic-winners.json'
      )
      .subscribe((data) => (this.rowData = data));
  }
}

结果

游乐场：https://plnkr.co/edit/mgrB3Fs6SYaykDcZ?预览

了解更多信息https://www.ag-grid.com/angular-data-grid/component-cell-renderer/

更新

您想添加一个附加列来在枢轴模式下显示按钮吗？我想我们不能这样做。

我们来看看官方文档是怎么说的

枢轴模式

需要打开枢轴模式才能枢轴工作。当。。。的时候 网格处于枢轴模式时，会发生以下情况：

• 只有处于活动状态的“组”、“数据透视表”或“值”的列才会包含在网格中。

• 仅显示聚合行，不会显示最低级别的行数据。

在这种情况下我们只有一个组行，并且在数据透视模式下我们不能有额外的组行。

请阅读https://www.ag-grid.com/angular-data-grid/pivoting/