Angular Ag-grid侧边列工具面板获取复选框事件方法咨询

Ag-Grid企业版针对列工具面板的勾选/取消勾选操作，提供了两种可靠的监听方式：

1. 监听columnVisible事件（全局列可见性变更） #

这个事件会在任何场景下（工具面板勾选、API调用、列拖拽等）触发列可见性变更，适合需要统一处理列显示/隐藏逻辑的场景。

示例代码：

// 在组件的gridOptions中配置事件回调
this.gridOptions = {
  // 其他Grid配置项...
  columnVisible: (event) => {
    console.log(`列 ${event.colDef.field} 可见状态变更为: ${event.visible}`);
    // 在这里编写你的业务处理逻辑
  }
};

2. 监听columnStateChanged事件（精准对应工具面板操作） #

如果只想监听工具面板触发的列状态变更（包括勾选、列顺序调整等），可以通过Grid API绑定columnStateChanged事件，回调中可筛选出可见性变化的列：

示例代码：

// Grid初始化完成时绑定事件
onGridReady(params) {
  const gridApi = params.api;
  gridApi.addEventListener('columnStateChanged', () => {
    // 获取当前所有列的状态
    const columnStates = gridApi.getColumnState();
    // 筛选出可见性发生变化的列
    const changedColumns = columnStates.filter(col => col.visible !== col.originalVisible);
    
    changedColumns.forEach(col => {
      console.log(`列 ${col.colId} 可见状态变为: ${col.visible}`);
      // 处理具体业务逻辑
    });
  });
}

补充说明 #

• columnStateChanged事件不仅会在勾选列时触发，列的顺序、宽度变更也会触发，若仅关注可见性，需通过originalVisible和当前visible的对比来筛选。
• 若需要监听工具面板本身的显示/隐藏，可使用toolPanelVisibleChanged事件，但该事件不直接对应列勾选操作。

内容的提问来源于stack exchange，提问作者Mannan Bahelim