在ag-Grid Angular中使用行拖拽无法对分组内的行重新排序

你的核心问题是分组场景下未正确配置ag-Grid的拖拽管理机制，导致拖拽后行位置未更新。以下是针对性修复步骤：

1. 启用ag-Grid托管拖拽模式 #

在gridOptions中添加rowDragManaged: true，这是分组内行拖拽生效的关键配置——让ag-Grid自动处理拖拽后的行位置调整：

gridOptions: GridOptions = {
  rowDragManaged: true,
  animateRows: false, // 可选：关闭行动画避免拖拽时视觉异常
  // 保留你原有的其他配置
};

2. 确保数据源支持修改 #

ag-Grid托管拖拽需要直接修改数据源数组的顺序。如果你的rowData是不可变结构，需通过onRowDragEnd回调手动同步拖拽后的顺序：

onRowDragEnd(params: RowDragEndEvent) {
  const draggedNode = params.node;
  // 仅处理分组内的子行
  if (!draggedNode.parent) return;

  const parentNode = draggedNode.parent;
  // 获取当前分组下所有非分组子节点
  const sortedChildren = parentNode.childrenAfterFilter
    .filter(node => !node.group)
    .map(node => node.data);

  // 更新原数据源中对应分组的子数据（需匹配你的数据结构）
  this.rowData = this.rowData.map(item => {
    if (item.country === parentNode.key) {
      return { ...item, children: sortedChildren };
    }
    return item;
  });

  this.gridApi?.setRowData(this.rowData);
}

然后在gridOptions中绑定该回调：

gridOptions: GridOptions = {
  onRowDragEnd: this.onRowDragEnd.bind(this),
  // 其他配置
};

3. 检查列拖拽配置 #

确保列定义中正确启用行拖拽：

columnDefs = [
  {
    field: 'athlete',
    rowDrag: true, // 为该列启用拖拽手柄
    // 其他列配置
  },
  // 其他列...
];

4. 避免排序规则干扰 #

如果分组列开启了sortable: true，拖拽后排序规则会重置行位置，需在拖拽结束后清除排序：

onRowDragEnd(params: RowDragEndEvent) {
  params.columnApi.setSortModel([]);
  // 其他更新逻辑
}

完成以上配置后，分组内的行拖拽即可正常触发排序更新。

内容的提问来源于stack exchange，提问作者Anil Kumar Reddy A