在ag-Grid中,可以使用GridOptions中的onGridReady
事件来注册组标题的点击事件。具体的解决方法如下所示:
ag-grid-angular
指令创建ag-Grid:
GridOptions
和相关属性:import { Component } from '@angular/core';
import { GridOptions } from 'ag-grid-community';
@Component({
selector: 'app-grid',
templateUrl: './grid.component.html',
styleUrls: ['./grid.component.css']
})
export class GridComponent {
gridOptions: GridOptions;
rowData: any;
columnDefs: any;
defaultColDef: any;
groupHeaderHeight: number;
constructor() {
this.gridOptions = {};
this.rowData = [
{ make: 'Toyota', model: 'Celica', price: 35000 },
{ make: 'Ford', model: 'Mondeo', price: 32000 },
{ make: 'Porsche', model: 'Boxster', price: 72000 }
];
this.columnDefs = [
{ headerName: 'Make', field: 'make', sortable: true, filter: true },
{ headerName: 'Model', field: 'model', sortable: true, filter: true },
{ headerName: 'Price', field: 'price', sortable: true, filter: true }
];
this.defaultColDef = { sortable: true, filter: true };
this.groupHeaderHeight = 75;
}
onGridReady(params) {
this.gridOptions.api = params.api;
this.gridOptions.columnApi = params.columnApi;
}
onGroupHeaderClicked(event) {
console.log('Group header clicked:', event.node.key);
}
}
onGroupHeaderClicked(event) {
console.log('Group header clicked:', event.node.key);
}
以上代码示例中,点击组标题时,会在控制台输出相应的组标题的键值。你可以根据实际需求来处理组标题的点击事件。