Angular ag-grid 如何在autoGroupColumn分组列前新增自定义列

实现步骤 #

方案1：手动指定分组列位置（推荐，灵活性最高） #

这种方法直接控制所有列的顺序，不需要依赖ag-grid自动插入分组列

• 第一步：定义列配置，按你想要的顺序排列，先放带上下文菜单的自定义列，再放分组列

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

public columnDefs: ColDef[] = [
  // 新增的带上下文菜单的前置列
  {
    headerName: '操作',
    width: 80,
    sortable: false,
    filter: false,
    suppressMovable: true, // 禁止拖动改变位置
    // 方式1：使用ag-grid自带上下文菜单
    contextMenuItems: [
      'copy',
      'separator',
      {
        name: '删除记录',
        action: (params) => {
          // 拿到当前行数据执行逻辑
          const rowData = params.node.data;
          console.log('删除行', rowData);
        }
      },
      {
        name: '编辑记录',
        action: (params) => {
          const rowData = params.node.data;
          console.log('编辑行', rowData);
        }
      }
    ]
    // 方式2：使用自定义单元格渲染器实现菜单按钮
    // cellRenderer: YourCustomMenuComponent,
    // cellRendererParams: {
    //   customParam: 'xxx'
    // }
  },
  // 手动定义分组列，放在操作列之后
  {
    type: 'agGroupColumn', // 必须指定，标记为分组列
    headerName: 'Name',
    minWidth: 350,
    cellClass: 'indented',
    cellRendererParams: {
      suppressCount: true,
      innerRenderer: 'UserImageInTreeComponent',
      isManager: false,
      showNameAsHyperlink: true
    }
  }
];

// gridOptions 新增配置
public gridOptions = {
  // 原有配置保留，新增以下内容
  groupDisplayType: 'custom', // 启用自定义分组列模式
  // 如果用了自定义单元格渲染器，需要注册
  frameworkComponents: {
    UserImageInTreeComponent: UserImageInTreeComponent,
    // YourCustomMenuComponent: YourCustomMenuComponent
  }
}

• 第二步：修改模板，替换autoGroupColumnDef为columnDefs配置

<ag-grid-angular
    #agGrid
    style="height:calc(100vh - 12rem)"
    class="ag-theme-balham ag-grid indent"
    [rowData]="data$ | async"
    [treeData]="true"
    [animateRows]="true"
    [gridOptions]="gridOptions"
    (gridReady)="onGridReady($event)"
    [columnDefs]="columnDefs"> <!-- 替换原来的autoGroupColumnDef属性 -->
  </ag-grid-angular>

方案2：通过lockPosition控制列顺序（适合不想改原有autoGroupColumnDef的场景） #

如果不想改动原有autoGroupColumnDef配置，可以通过锁列位置实现排序

• 第一步：修改autoGroupColumnDef，添加lockPosition配置

readonly autoGroupColumnDef = {
    headerName: 'Name',
    minWidth: 350,
    lockPosition: 1, // 数值越大越靠右，设为1放在第二列
    cellClass: 'indented',
    cellRendererParams: {
      suppressCount: true,
      innerRenderer: 'UserImageInTreeComponent',
      isManager: false,
      showNameAsHyperlink: true
    }
  };

• 第二步：添加前置自定义列配置，lockPosition设为0

public columnDefs: ColDef[] = [
  {
    headerName: '操作',
    width: 80,
    lockPosition: 0, // 数值最小，放在最左侧
    sortable: false,
    filter: false,
    // 上下文菜单配置同上
  }
];

• 第三步：模板同时保留columnDefs和autoGroupColumnDef属性即可

注意事项 #

• 如果使用自定义单元格渲染器实现菜单，必须先把组件注册到gridOptions的frameworkComponents中
• lockPosition属性优先级高于列的排列顺序，数值越小列越靠左
• treeData模式下必须保留treeData: true和getDataPath相关配置，否则树形结构不会渲染

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