ag-grid-angular@13.3.0是否支持rowDrag、rowDragManaged行重排功能?
ag-grid-angular@13.3.0 行重排实现方案
首先明确:ag-grid v13.3.0不支持rowDragManaged配置项,这个托管式拖拽功能是在v20及以后版本才引入的,所以你设置该属性自然不会生效。不过v13版本确实支持基础行拖拽,需要通过手动处理拖拽事件来实现行重排,具体步骤如下:
实现步骤
- 开启行拖拽手柄
在列定义中,为需要作为拖拽触发区域的列设置rowDrag: true,通常会单独设置一个拖拽手柄列:
columnDefs = [ { field: 'drag', rowDrag: true, width: 50, sortable: false, filter: false, headerName: '' // 可设置为空表头 }, // 你的其他列定义... ];
- 监听拖拽结束事件,手动调整数据源顺序
通过onRowDragEnd事件获取拖拽前后的行节点,调整数据源数组的顺序后,调用grid API更新数据:
gridOptions = { columnDefs: this.columnDefs, onRowDragEnd: (params) => { const draggedNode = params.node; const targetNode = params.overNode; // 若拖拽目标不存在,直接返回 if (!targetNode) return; // 获取当前显示的所有行数据 const rowData = params.api.rowModel.rowsToDisplay.map(row => row.data); const draggedIndex = rowData.indexOf(draggedNode.data); const targetIndex = rowData.indexOf(targetNode.data); // 调整数据顺序 rowData.splice(draggedIndex, 1); rowData.splice(targetIndex, 0, draggedNode.data); // 更新grid数据,完成重排 params.api.setRowData(rowData); }, // 其他grid配置... };
- 额外注意事项
- 确保grid的
enableRowDrag未被设置为false(默认值为true),否则会禁用所有行拖拽功能。 - 检查项目中是否有自定义CSS覆盖了ag-grid的拖拽样式,导致拖拽手柄不可见或无法触发。
- 如果你的grid使用了分页,上述逻辑仅对当前页的数据生效,若需跨页重排,需要额外处理分页数据的逻辑。
内容的提问来源于stack exchange,提问作者Milan
相关产品推荐
相关产品推荐

