如何在AG-grid中每次在table底部设置一个特定的raw？

Question

我使用 AG-grid 创建了一个 table。这是代码

.HTML

<ag-grid-angular #agGrid 
        style="width: 100%; height: 100%; font-size: 12px;" 
        class="ag-theme-alpine"
        [rowData]="rowData"
        [columnDefs]="columnDefs"
    >
    </ag-grid-angular>

.Ts

columnDefs =  [{  
        headerName: '',
        field: 'rush',
        width: 53,
        resizable: true,
        cellRendererFramework: RegularGridCheckboxComponent, 
        cellRendererParams: { clickHandler: this.checkBoxClickHander.bind(this)},
      },
      {
        headerName: 'Type',
        field: 'type',
        width: 74,
        resizable: true,
      },
      {
        headerName: 'Address',
        field: 'address',
        width: 176,
        resizable: true
      }]

我有一些 rowData 我不包括在这里

其实我想创建一个如下图所示的网格设计。您可以看到网格底部有一个特定的 raw

here is the image

Answer 1

您可以使用页脚在底部固定一行： .HTML

  <ag-grid-angular #agGrid 
            style="width: 100%; height: 100%; font-size: 12px;" 
            class="ag-theme-alpine"
            [rowData]="rowData"
            [autoGroupColumnDef]="autoGroupColumnDef"
            [columnDefs]="columnDefs">
        </ag-grid-angular>

.TS 加这个

 public autoGroupColumnDef: ColDef = {
        minWidth: 300,
        cellRendererParams: {
          innerRenderer: MyInnerRenderer,
        },
      };

创建一个新组件：对我来说它是 MyInnerRenderer

MyInnerRenderer

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

@Component({
  selector: 'total-value-component',
  template: `<span style="color: {{ color }}; font-weight: {{ fontWeight }};"
    >{{ prefix }} {{ cellValue }}</span
  >`,
})
export class MyInnerRenderer implements ICellRendererAngularComp {
  public cellValue = '';
  public color = '';
  public fontWeight = '';
  public prefix = '';

  // gets called once before the renderer is used
  agInit(params: ICellRendererParams): void {
    this.cellValue = params.value;
    this.color = params.node.footer ? 'navy' : '';
    this.fontWeight =
      params.node.footer && params.node.level === -1 ? 'bold' : '';
    if (params.node.footer) {
      this.prefix = params.node.level === -1 ? 'Grand Total' : 'Sub Total';
    }
  }

  refresh(params: ICellRendererParams) {
    return false;
  }
}

有关详细信息，请参阅 here

如何在AG-grid中每次在table底部设置一个特定的raw？

How to set one specific raw in bottom of the table every time in AG-grid?

javascript

ag-grid

angular