Angular中AGGrid Enterprise重置列时隐藏列复现问题及自定义需求

针对你遇到的「通过setColumnVisible隐藏的列，点击列菜单「重置列」后重新显示」的问题，AGGrid支持直接自定义默认列菜单的重置逻辑，无需全量自定义列菜单，以下是几种全局生效的解决方案：

方法一：修改列初始定义（最简单固定场景） #

如果repName列全局默认需要隐藏，直接在列定义（colDef）或全局默认列定义中设置hide: true，重置列时会遵循初始定义的可见性：

// 针对repName列的单独定义
const colDefs = [
  // 其他列...
  {
    field: 'repName',
    hide: true, // 初始设置为隐藏
    // 其他列配置...
  }
];

方法二：拦截重置事件自定义逻辑（动态判断场景） #

通过监听AGGrid的columnMenuResetColumns事件，阻止默认重置行为，自定义列状态恢复逻辑，保留特定列的隐藏状态。在Angular中可全局配置：

1. 编写全局AGGrid配置函数

import { GridApi } from 'ag-grid-community';

export function setupGlobalAGGridConfig() {
  return {
    onGridReady: (params: { api: GridApi }) => {
      // 监听重置列事件
      params.api.addEventListener('columnMenuResetColumns', (event) => {
        // 阻止默认重置行为
        event.preventDefault();
        
        // 获取当前列状态并修改
        const columnState = params.api.getColumnState();
        const updatedState = columnState.map(col => {
          // 逻辑：repName列强制保持隐藏
          if (col.colId === 'repName') {
            return { ...col, hide: true };
          }
          // 其他列恢复到初始定义状态
          const initialColDef = params.api.getColumnDef(col.colId);
          return {
            ...col,
            hide: initialColDef?.hide ?? false,
            width: initialColDef?.width ?? undefined,
            sort: null,
            sortIndex: null,
            pinned: initialColDef?.pinned ?? null
          };
        });
        
        // 应用修改后的列状态
        params.api.setColumnState(updatedState);
      });
    }
  };
}

2. 在Angular根模块中注入全局配置

import { AgGridModule } from 'ag-grid-angular';

@NgModule({
  imports: [
    AgGridModule.withComponents([]).provideDefaultGridOptions(setupGlobalAGGridConfig())
  ]
})
export class AppModule {}

方法三：替换默认重置菜单项（完全自定义场景） #

直接替换列菜单中的默认「重置列」选项，自定义菜单文本和逻辑，全局生效：

1. 编写全局默认列定义，自定义列菜单

import { ColumnMenuItemParams } from 'ag-grid-community';

export const globalDefaultColDef = {
  columnMenu: {
    items: (params: ColumnMenuItemParams) => {
      // 获取默认菜单项并移除原有重置项
      const defaultItems = params.getDefaultItems();
      const customItems = defaultItems.filter(item => item.key !== 'resetColumns');
      
      // 添加自定义重置项
      customItems.push({
        name: '重置列',
        key: 'customResetColumns',
        action: () => {
          // 自定义重置逻辑
          const columnState = params.columnApi.getColumnState();
          const updatedState = columnState.map(col => {
            if (col.colId === 'repName') {
              return { ...col, hide: true };
            }
            const initialColDef = params.columnApi.getColumnDef(col.colId);
            return {
              ...col,
              hide: initialColDef?.hide ?? false,
              width: initialColDef?.width ?? undefined,
              sort: null,
              sortIndex: null,
              pinned: initialColDef?.pinned ?? null
            };
          });
          params.columnApi.setColumnState(updatedState);
        }
      });
      
      return customItems;
    }
  }
};

2. 在Angular根模块中注入全局默认列定义

import { AgGridModule } from 'ag-grid-angular';

@NgModule({
  imports: [
    AgGridModule.withComponents([]).provideDefaultColDef(globalDefaultColDef)
  ]
})
export class AppModule {}

选择建议 #

• 固定隐藏列优先用方法一，代码最少
• 需要动态判断隐藏列用方法二，无需修改菜单结构
• 需要完全自定义重置逻辑或菜单文本用方法三

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