AG Grid如何通过自定义上下文菜单删除/隐藏表格行

你之前的代码无法生效的核心原因：

• 右键触发行上下文菜单时，ag-grid 默认不会自动选中当前右键行，直接调用getSelectedRows()会拿到空数组
• 脱离官方API直接修改数据源、样式配置不会触发表格重渲染，操作不会同步到视图

方案1：永久删除行（修改数据源） #

直接从上下文事件对象上取当前右键对应的行节点，不需要依赖行选中状态，调用官方事务API即可完成删除，自动同步分页、视图更新：

const gridOptions = {
  defaultColDef: {
    flex: 1,
    minWidth: 150,
    resizable: true,
    filter: true,
    floatingFilter: true,
    sortable: true,
  },
  rowData: ObjData,
  pagination: true,
  paginationPageSize: 10,
  // 可选：右键时自动选中当前行，符合通用交互习惯
  onCellContextMenu: (params) => {
    params.api.deselectAll();
    params.node.setSelected(true);
  },
  getContextMenuItems(event) {
    return [
      {
        name: 'Delete Row',
        action: () => {
          // 直接获取当前右键对应的行数据，无需提前选中
          const targetRow = event.node.data;
          // 调用事务API执行删除，自动刷新视图
          event.api.applyTransaction({
            remove: [targetRow]
          });
        },
      },
      // 如需保留默认菜单项，按下方格式追加即可
      'separator',
      'copy',
      'copyWithHeaders'
    ]
  }
}

方案2：隐藏行（不修改原始数据源） #

如果不需要真实删除数据，仅做视觉隐藏，可以用外部过滤能力实现，不需要改动原始rowData结构：

const gridOptions = {
  // 其余基础配置和方案1一致
  getContextMenuItems(event) {
    return [
      {
        name: 'Hide Row',
        action: () => {
          const targetNode = event.node;
          // 给行节点加隐藏标记
          targetNode.setDataValue('__rowHidden', true);
          // 触发过滤刷新
          event.api.onFilterChanged();
        },
      }
    ]
  },
  // 开启外部过滤
  isExternalFilterPresent: () => true,
  // 过滤规则：排除标记为隐藏的行
  doesExternalFilterPass: (node) => !node.data.__rowHidden
}

后续如果需要恢复隐藏行，遍历所有行节点将__rowHidden标记设为false，再调用api.onFilterChanged()即可。

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