Ag-grid表格刷新时丢失行焦点的问题解决咨询

我太懂ag-grid自动刷新后丢选中状态这个坑了！你之前直接记录旧rowNode的思路没生效，核心原因是表格刷新后，原来的rowNode对象已经被销毁，新渲染的行是完全全新的节点实例，拿旧节点去设置选中自然没用。下面给你一套亲测有效的解决方案：

1. 换个记录方式：存选中行的唯一ID，而非rowNode本身 #

在onSelectionChanged事件里，不要直接存rowNode，而是存该行数据的唯一标识（比如业务数据里的id字段），同时记录聚焦的列ID：

// 用全局/scope变量存选中信息（Angular的话存在$scope里就行）
let selectedRowId = null;
let focusedColId = null;

function onSelectionChanged() {
    const selectedNodes = $scope.gridApi.getSelectedNodes();
    if (selectedNodes.length > 0) {
        const selectedNode = selectedNodes[0];
        // 存数据的唯一ID，根据你的实际业务字段调整（比如data.userId/data.orderId）
        selectedRowId = selectedNode.data.id;
        // 记录当前聚焦的单元格列ID
        const focusedCell = $scope.gridApi.getFocusedCell();
        focusedColId = focusedCell ? focusedCell.column.colId : null;
    }
}

2. 刷新完成后，根据唯一ID找到新节点并恢复状态 #

关键要等表格数据刷新、新节点渲染完成后再执行恢复操作，推荐用ag-grid的rowDataChanged事件监听，比setTimeout更稳妥：

// 恢复选中和聚焦的函数
function restoreSelectionAndFocus() {
    if (!selectedRowId) return;

    // 根据唯一ID找到刷新后的新rowNode
    const newRowNode = $scope.gridApi.getRowNode(selectedRowId);
    if (newRowNode) {
        // 恢复选中状态
        $scope.gridApi.setNodesSelected([newRowNode], true);
        // 恢复聚焦单元格（如果之前记录了列ID）
        if (focusedColId) {
            $scope.gridApi.setFocusedCell(newRowNode.rowIndex, focusedColId);
        }
    }
}

// 在你的刷新逻辑里，或者直接监听rowDataChanged事件
// 比如你的刷新函数：
function refreshGrid() {
    // 这里是你获取新数据并更新表格的逻辑
    $scope.gridApi.setRowData(newFetchedData);
}

// 监听表格数据变化事件，自动触发恢复
$scope.gridApi.addEventListener('rowDataChanged', restoreSelectionAndFocus);

3. 额外注意：确保ag-grid能识别行的唯一标识 #

如果你的业务数据没有天然的唯一ID，或者ID不稳定，可以通过gridOptions的getRowId配置手动指定：

$scope.gridOptions = {
    getRowId: params => params.data.yourUniqueKey, // 替换成你数据里的唯一字段
    // 其他配置...
};

这样处理后，每次表格刷新完成，都会自动找到对应行恢复选中和聚焦状态，完美解决丢失焦点的问题！

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