Question

我在这里使用ag-angular-grid，我也有组标题和子列。我想知道该组标题单击的单击事件。下面是我如何创建标头：

  {
            headerName: "<span id='performanceData'>Performance</span> <i class='fa fa-eye group-open-settings-button' aria-hidden='true' data-group='PerformanceData' ></i>",
            groupId: "PerformanceData",
            marryChildren: false,
            onCellValueChanged:event=>{
                console.log('trst');
            },
            children: [
                {
                    headerName: "Talent Decision",
                    headerTooltip: "Talent Decision",

点击此按钮，我想打开一个弹出窗口。

有什么主意吗？

Answer 1

您将需要为自定义组标题创建一个单独的组件。可以通过实现IHeaderGroupAngularComp并使用headerGroupComponentFramework（如标题组组件的documentation所述）来完成。

关于如何完成它，这里是一个粗略的草图。

首先，在使用ag-grid的主要组件上，我们需要为frameworkComponents绑定输入属性，并导入您的自定义标头组组件。

在component.html上，

<ag-grid-angular style="width: 100%; height: 350px;" class="ag-theme-balham"
  [columnDefs]="columnDefs"
  [frameworkComponents]="frameworkComponents"
  <!-- other properties -->
</ag-grid-angular>

在component.ts上，定义将绑定到您的frameworkComponents的组件，并定义您的自定义标头。

import { CustomHeaderGroupComponent } from '../custom-header-group-component/custom-header-group.component';

constructor() {
  this.frameworkComponents = {
    customHeaderGroupComponent: CustomHeaderGroupComponent,
  };

  this.columnDefs = [
    {
      headerGroupComponent: 'customHeaderGroupComponent',
      // other properties for your group header
    }

  ];
}

不要忘记在模块中也包含自定义标头组组件。

import { CustomHeaderGroupComponent } from "./custom-header-group-component/custom-header-group.component";


@NgModule({
    imports: [
        AgGridModule.withComponents(
            [
              CustomHeaderGroupComponent
            ]
        ),
        // other imports 
    ],
    declarations: [
      CustomHeaderGroupComponent,
     // other components
    ],
    // others
})

然后在标头组的自定义component.html模板上，您可以将(click)事件绑定到标头组：

<div (click)="openPopup($event)"><span id='performanceData'>Performance</span> <i class='fa fa-eye group-open-settings-button' aria-hidden='true' data-group='PerformanceData' ></i></div>

在header组的component.ts上，您可以定义openPopup()方法：

import { Component } from '@angular/core';
import { IHeaderGroupAngularComp } from 'ag-grid-angular';
import { IHeaderGroupParams } from 'ag-grid-community';

.
.
.

export class CustomHeaderGroupComponent implements IHeaderGroupAngularComp {
  params: IHeaderGroupParams;

  agInit(params: IHeaderGroupParams) {
    this.params = params;
  }
  . 
  .
  openPopup() {
    // handle the rest to enable to opening of the popup
  }

}

虽然可以使用所有功能的完整演示，但实际上可以使用完整的演示here。

Ag-grid Angular上组标题的Click事件

1 个答案: