Ag-grid双击含子列的父表头时单元格编辑意外停止问题

问题根因 #

Ag-grid默认对层级父表头绑定了双击展开/收起逻辑，该事件默认不会阻止向上冒泡，会触发Grid全局的「非编辑区域点击自动终止编辑」逻辑，因此双击父表头时正在进行的编辑会被中断。而子表头的双击事件默认做了冒泡拦截，所以不会触发编辑终止。

解决方案 #

方案1：单独配置目标列组（推荐，不影响其他表头逻辑） #

给需要处理的父列组添加配置，禁用默认双击事件的冒泡，同时可以保留原有的展开/收起能力：

const columnDefs = [
  {
    headerName: 'Athlete Details',
    // 禁用默认双击展开/收起的内置逻辑，方便自定义处理
    suppressDoubleClickExpand: true,
    // 自定义双击事件
    onHeaderDoubleClick: (params) => {
      // 保留原有的展开/收起功能，不需要可以删除
      params.columnGroup.setExpanded(!params.columnGroup.isExpanded());
      // 阻止事件冒泡，避免触发全局编辑终止逻辑
      params.event.stopPropagation();
    },
    children: [/* 子列配置 */]
  },
  {
    headerName: 'Sports Results',
    suppressDoubleClickExpand: true,
    onHeaderDoubleClick: (params) => {
      params.columnGroup.setExpanded(!params.columnGroup.isExpanded());
      params.event.stopPropagation();
    },
    children: [/* 子列配置 */]
  }
]

方案2：全局统一处理所有父表头 #

如果所有层级父表头都需要避免双击中断编辑，可以直接在Grid全局配置中统一监听处理：

const gridOptions = {
  // 其他全局配置...
  onHeaderDoubleClick: (params) => {
    // 只处理列组（父表头）的双击事件
    if (params.columnGroup) {
      params.event.stopPropagation();
      // 需要保留展开/收起能力的话加下面这行
      params.columnGroup.setExpanded(!params.columnGroup.isExpanded());
    }
  }
}

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