要获取Angular Ag-grid侧边栏列工具面板复选框的事件,可以按照以下步骤进行操作:
import { Component } from '@angular/core';
import { IToolPanel, IToolPanelParams } from 'ag-grid-community';
@Component({
selector: 'app-custom-tool-panel',
template: `
{{ column.headerName }}
`,
styles: [
`
.custom-tool-panel {
padding: 10px;
}
`
]
})
export class CustomToolPanelComponent implements IToolPanel {
private params: IToolPanelParams;
public columns: any[];
agInit(params: IToolPanelParams): void {
this.params = params;
this.columns = params.columnApi.getAllColumns();
}
onColumnCheckboxChange(event: any, column: any): void {
this.params.columnApi.setColumnVisible(column, event.target.checked);
}
}
sideBar
属性中。import { Component } from '@angular/core';
@Component({
selector: 'app-grid',
template: `
`
})
export class GridComponent {
public gridOptions: any;
constructor() {
this.gridOptions = {
// 配置Ag-grid其他选项
sideBar: {
toolPanels: [
{
id: 'customToolPanel',
labelDefault: 'Custom Tool Panel',
labelKey: 'customToolPanel',
toolPanel: 'appCustomToolPanel' // 自定义侧边栏列工具面板组件
}
],
defaultToolPanel: 'customToolPanel'
},
// 配置列等其他选项
};
}
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AgGridModule } from 'ag-grid-angular';
import { GridComponent } from './grid.component';
import { CustomToolPanelComponent } from './custom-tool-panel.component';
@NgModule({
imports: [BrowserModule, AgGridModule.withComponents([CustomToolPanelComponent])],
declarations: [GridComponent, CustomToolPanelComponent],
bootstrap: [GridComponent]
})
export class AppModule {}
通过以上步骤,您将能够获取到侧边栏列工具面板复选框的事件,并根据选中状态设置相应列的可见性。