Angular/TS下AG Grid行拖拽至分组行网格的实现方案问询

核心思路 #

你的认知方向是对的，applyTransaction确实是处理行增删的核心方法，关键在于捕获拖拽目标分组行的Type值，并将其赋值给Grid1的拖拽行，再将该行添加到Grid2对应分组的数据源中。

实现步骤与代码示例 #

1. 配置Grid拖拽基础功能 #

• Grid1（源网格）开启行拖拽，绑定rowDragEnd事件处理拖拽收尾逻辑。
• Grid2（目标网格）开启拖拽接收模式，监听dragOver事件识别分组行目标，同时配置分组规则。

2. 识别分组行并获取Type值 #

在Grid2的dragOver事件中，通过params.overNode.group判断当前悬浮的是否为分组行，若是则通过params.overNode.key直接获取分组对应的Type值（Grid按Type分组时，分组节点的key即为Type字段值）。

3. 执行跨网格行迁移事务 #

在Grid1的dragEnd事件中，确认拖拽目标为Grid2的分组行后，给拖拽行添加对应Type字段，再通过applyTransaction分别完成Grid2的行添加和Grid1的行移除。

完整代码示例 #

// Grid1 配置
const grid1Options = {
  columnDefs: [
    { field: 'street', rowDrag: true },
    { field: 'number' },
    { field: 'city' }
  ],
  rowData: [
    { street: 'Main St', number: '123', city: 'New York' },
    { street: 'Park Ave', number: '456', city: 'London' }
  ],
  rowDragEnd: (params) => {
    // 验证拖拽目标是否为Grid2
    const targetGrid = params.event.target.closest('.ag-grid');
    if (!targetGrid || targetGrid.id !== 'grid2') return;

    const draggedRow = params.node.data;
    // 读取临时存储的目标分组Type
    const targetType = window.targetGroupType;
    if (!targetType) return;

    // 给拖拽行添加Type字段
    const newRow = { ...draggedRow, type: targetType };

    // 执行行迁移事务
    grid2Api.applyTransaction({ add: [newRow] });
    grid1Api.applyTransaction({ remove: [draggedRow] });

    // 清空临时存储
    window.targetGroupType = null;
  }
};

// Grid2 配置
const grid2Options = {
  columnDefs: [
    { field: 'type', rowGroup: true, hide: true },
    { field: 'street' },
    { field: 'number' },
    { field: 'city' }
  ],
  rowData: [
    { type: 'Residential', street: 'Oak St', number: '789', city: 'Paris' },
    { type: 'Commercial', street: 'Elm St', number: '101', city: 'Tokyo' }
  ],
  rowDragManaged: true,
  groupDefaultExpanded: 1,
  dragOver: (params) => {
    if (params.overNode.group) {
      // 存储目标分组的Type值
      window.targetGroupType = params.overNode.key;
      // 允许浏览器执行放置操作
      params.event.preventDefault();
    } else {
      window.targetGroupType = null;
    }
  },
  getRowDragText: (params) => {
    return `${params.data.street} ${params.data.number}, ${params.data.city}`;
  }
};

// 存储Grid实例API
let grid1Api, grid2Api;
function onGrid1Ready(params) { grid1Api = params.api; }
function onGrid2Ready(params) { grid2Api = params.api; }

关键细节说明 #

• 若使用React/Vue等框架，可将临时存储targetGroupType替换为组件状态，避免全局变量污染。
• 如需支持多行拖拽，只需将单条行的处理逻辑改为数组批量操作即可。
• 必须在dragOver事件中调用preventDefault()，否则浏览器会默认阻止跨网格的拖拽放置操作。

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