AG-Grid技术咨询：如何修改无字段的合并父表头名称

遇到这种父表头（列组）没有field属性、没法用getColumn()获取的情况，其实有几种简单可靠的方法来修改它的名称，我给你整理一下：

方法1：直接修改原始列定义并刷新 #

既然你已经有原始的列定义数组my_colDef，可以直接找到对应的父列组定义，修改headerName后重新设置列定义：

// 定位到父表头的列定义
const parentColGroup = my_colDef.find(col => col.headerName === 'Details');
if (parentColGroup) {
  // 修改成你想要的名称
  parentColGroup.headerName = 'Updated Details';
  // 通知AG-Grid更新列定义
  $scope.ag_gridOptions_data.api.setColumnDefs(my_colDef);
}

方法2：通过ColumnApi获取列组对象修改 #

AG-Grid的columnApi提供了专门操作列组的方法，你可以直接获取列组对象并修改，然后刷新表头：

方式2.1：给父列组设置name属性（推荐） #

先给你的父列组添加一个name属性，这样定位更准确，避免依赖headerName：

var my_colDef= [ 
  { 
    headerName: 'Details', 
    name: 'detailsParentGroup', // 添加唯一标识name
    children:[ 
      { headerName: 'Id', field: 'Items' } 
    ] 
  } 
];

然后通过getColumnGroup()获取并修改：

const detailsGroup = $scope.ag_gridOptions_data.columnApi.getColumnGroup('detailsParentGroup');
if (detailsGroup) {
  detailsGroup.headerName = 'New Parent Header';
  // 刷新表头让修改生效
  $scope.ag_gridOptions_data.api.refreshHeader();
}

方式2.2：遍历列组查找（适合不想修改原始列定义的情况） #

如果不想给列组加name，可以遍历所有显示的列组来查找目标：

// 获取所有顶级列组
const allTopGroups = $scope.ag_gridOptions_data.columnApi.getAllDisplayedColumnGroups();
// 找到目标父表头
const targetGroup = allTopGroups.find(group => group.getHeaderName() === 'Details');
if (targetGroup) {
  targetGroup.setHeaderName('Custom Details');
  $scope.ag_gridOptions_data.api.refreshHeader();
}

为什么你之前的方法不行？ #

你用getColumn("Items")能拿到子表头，是因为子表头是带field的普通列，而父表头属于列组（Column Group），getColumn()方法只能获取关联了field的普通列，所以没法用它定位父表头。上面的方法都是针对列组的操作方式，更贴合你的场景。

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