如何在ag-grid中获取当前获得焦点的列头？

当你给AG Grid列配置了自定义headerComponent后，要获取键盘导航时处于焦点状态的列头，可以通过以下几种方式实现：

方法1：利用AG Grid的columnHeaderFocused事件 #

AG Grid内置了监听列头焦点变化的事件，直接在gridOptions中配置即可捕获焦点列：

const gridOptions = {
  // 其他网格配置...
  onColumnHeaderFocused: (params) => {
    if (params.column) {
      // params.column即为当前获得焦点的列对象
      console.log('当前焦点列ID:', params.column.getColId());
      // 若需获取自定义headerComponent实例，可调用以下方法
      const headerInstance = params.column.getHeaderInstance();
      if (headerInstance) {
        // 这里可访问自定义组件的方法或属性
        console.log('自定义header组件实例:', headerInstance);
      }
    }
  }
};

方法2：在自定义headerComponent内部监听焦点事件 #

如果需要在自定义组件内直接处理焦点状态，可在组件初始化时给根元素添加焦点监听：

// 自定义headerComponent示例
class CustomHeaderComponent {
  init(params) {
    this.params = params;
    this.eGui = document.createElement('div');
    this.eGui.innerHTML = `<span>${params.displayName}</span>`;
    
    // 监听焦点获取事件
    this.eGui.addEventListener('focus', () => {
      console.log('当前焦点列（组件内）:', params.column.getColId());
      // 此处可直接操作组件DOM或内部状态
    });
    
    // 关键：必须给根元素设置tabindex，才能通过键盘导航获取焦点
    this.eGui.setAttribute('tabindex', '0');
  }

  getGui() {
    return this.eGui;
  }
}

方法3：通过AG Grid API主动查询焦点列 #

若需在任意时刻主动获取当前焦点的列头，可调用网格API的对应方法：

const focusedColumn = gridOptions.api.getFocusedColumnHeader();
if (focusedColumn) {
  console.log('当前焦点列ID:', focusedColumn.getColId());
}

你可以根据业务场景选择合适的方式：全局监听焦点变化用方法1，组件内部处理用方法2，主动查询焦点状态用方法3。

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