如何在Ag Grid主从行中启用自定义上下文菜单并区分父子行菜单

一、启用自定义上下文菜单的基础配置 #

Ag Grid通过getContextMenuItems回调函数实现自定义上下文菜单，主行与详情行的基础启用方式一致，只需在网格配置中注册该函数：

const gridOptions = {
  // 其他网格配置（如列定义、数据源等）
  getContextMenuItems: (params) => {
    // 构建自定义菜单数组
    return [
      {
        name: '查看行详情',
        action: () => {
          console.log('当前选中行数据:', params.node.data);
        }
      },
      { separator: true }, // 添加菜单分隔线
      { name: '默认复制', command: 'copy' } // 保留Ag Grid默认命令
    ];
  }
};

二、为父行与子行设置不同的上下文菜单 #

要区分父行（主行）和子行（详情行），可通过params.node的属性判断节点类型，再返回对应菜单：

1. 核心判断逻辑 #

• 父行判断：可通过params.node.group（分组场景）、params.node.hasChildNodes()（存在子节点的主行）或params.node.level === 0（层级为0的根节点）来识别；
• 子行判断：通过params.node.parent存在、params.node.level > 0或反向排除父行条件来识别。

2. 完整代码示例 #

const gridOptions = {
  // 其他网格配置
  getContextMenuItems: (params) => {
    // 判断是否为父行（根据你的数据结构调整条件）
    const isParentRow = params.node.hasChildNodes();
    // 子行即为非父行
    const isChildRow = !isParentRow;

    // 父行专属菜单
    if (isParentRow) {
      return [
        {
          name: '递归展开所有子行',
          action: () => params.node.setExpanded(true, true)
        },
        {
          name: '编辑父行信息',
          action: () => handleEditParent(params.node.data)
        },
        { separator: true },
        { name: '默认复制', command: 'copy' }
      ];
    }

    // 子行专属菜单
    if (isChildRow) {
      return [
        {
          name: '查看子行详情弹窗',
          action: () => openChildDetailModal(params.node.data)
        },
        {
          name: '删除当前子行',
          action: () => removeChildRow(params.node)
        },
        { separator: true },
        { name: '默认粘贴', command: 'paste' }
      ];
    }

    // 兜底返回默认菜单
    return params.defaultItems;
  }
};

3. 注意事项 #

• 若使用Master/Detail模式（主行+内嵌详情网格），详情网格需单独配置getContextMenuItems，因为它是独立的Ag Grid实例；
• 可结合params.column判断点击位置是行还是列头，进一步细化菜单逻辑；
• 自定义菜单的action函数可直接通过params获取当前节点、数据、网格实例等信息，灵活处理业务逻辑。

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