ag-grid angular 上的组标题的单击事件 [英] Click event for group header on ag-grid angular

问题描述

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

I am using ag-angular-grid in this I have group header and child columns also. I want to know click event of that group header click. below how I create header :

  {
            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",

点击这个我想打开一个弹出窗口.

on click this i wants to open a popup.

有什么想法吗?

推荐答案

您需要为自定义组标题创建单独的组件.这可以通过实现 IHeaderGroupAngularComp 并使用 headerGroupComponentFramework 来完成，如 文档 用于标题组组件.

You will need to create a separate component for your custom group header. This can be done by implementing the IHeaderGroupAngularComp and using headerGroupComponentFramework, as stated on the documentation for the Header Group component.

这是关于如何完成它的粗略草图.

Here is a rough sketch on how you can get it done.

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

First and foremost, on your main component that is using ag-grid, we will need to bind the input properties for frameworkComponents, and import your custom header group component.

在component.html上，

On the 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 和自定义标头的组件.

On the component.ts, define the component which will be binded to your frameworkComponents, and for your custom header.

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
    }

  ];
}

不要忘记在 module.ts 中也包含自定义标题组组件:

Do not forget to include your custom header group component on your module.ts too:

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) 事件绑定到标题:

On your custom component.html template for the header group, you can then bind the (click) event to the header to it:

<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>

在你的 component.ts 的头部组中，你可以定义 openPopup() 方法:

And on your component.ts for the header group, you can define the openPopup() method:

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
  }

}

完整的工作演示实际上是可用的 这里，虽然它是所有功能的完整演示.

The full working demo is actually available here, though it is a complete demo for all the features.

这篇关于ag-grid angular 上的组标题的单击事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！