AG-Grid树形数据拖拽时的展开状态保持技术解析

背景介绍

AG-Grid作为一款功能强大的数据表格组件，在处理树形结构数据时提供了丰富的交互功能。其中，行拖拽功能与树形数据结构的结合是一个常见的业务场景。然而，开发者在实现这一功能时经常会遇到一个典型问题：在拖拽操作后，树形结构的展开状态无法保持，导致用户体验不佳。

问题现象

当用户对AG-Grid中的树形数据进行拖拽操作时，虽然数据位置能够正确更新，但所有节点的展开状态会被重置。这意味着原本展开的节点可能会意外折叠，或者折叠的节点会被自动展开，破坏了用户的操作预期。

技术原理分析

AG-Grid的树形数据结构通过treeData属性开启，配合getDataPath方法定义节点的层级关系。行拖拽功能则通过rowDrag属性实现。当数据更新时，默认情况下组件会重新渲染整个树结构，导致展开状态丢失。

解决方案

状态保存与恢复机制

要实现拖拽过程中的展开状态保持，需要建立一套状态保存与恢复机制：

1. 状态捕获：在数据更新前，遍历所有节点并记录当前展开状态
2. 状态存储：将展开节点的唯一标识符（通常是id）保存到临时数组中
3. 状态恢复：在数据更新完成后，根据保存的标识符重新设置节点展开状态

核心代码实现

// 保存当前展开状态
const storeExpansionState = useCallback(() => {
  const expandedIds = [];
  gridRef.current.api.forEachNode((node) => {
    if (node.expanded && node.data?.id) {
      expandedIds.push(node.data.id);
    }
  });
  return expandedIds;
}, []);

// 恢复展开状态
const restoreExpansionState = useCallback((expandedIds) => {
  gridRef.current.api.forEachNode((node) => {
    if (node.data && expandedIds.includes(node.data.id)) {
      node.setExpanded(true);
    }
  });
}, []);

// 拖拽结束处理
const onRowDragEnd = useCallback((event) => {
  const expandedIds = storeExpansionState();
  
  // 更新数据逻辑...
  
  // 异步恢复状态
  setTimeout(() => {
    restoreExpansionState(expandedIds);
  }, 100);
}, [storeExpansionState, restoreExpansionState]);

关键配置项

除了上述逻辑外，还需要注意以下配置：

1. getRowNodeId：必须正确定义，用于标识节点唯一性
2. rememberGroupStateWhenNewData：设置为true可帮助保持部分状态
3. 适当的延迟恢复：使用setTimeout确保在数据更新完成后再恢复状态

性能优化建议

1. 批量操作：对于大规模数据，考虑使用批量状态恢复
2. 防抖处理：高频拖拽时添加防抖逻辑
3. 局部更新：尽可能只更新受影响节点的状态

总结

通过实现状态保存与恢复机制，开发者可以完美解决AG-Grid树形数据拖拽时的展开状态保持问题。这一方案不仅适用于简单的树形结构，也可以扩展应用到更复杂的业务场景中。关键在于理解AG-Grid的生命周期和数据更新机制，在适当的时机捕获和恢复UI状态。

在实际项目中，建议将此功能封装为可复用的高阶组件或自定义hook，以提高代码的可维护性。同时，根据具体业务需求，可以进一步扩展状态保持的范围，如选中等其他交互状态。