Angular中AgGrid服务端渲染下展开行祖先并高亮新行问题

问题分析 #

当前代码存在两个核心问题：

1. RowId拼接错误：highlightRow中把参数newRowId硬编码成了字符串"newRowId"，导致生成的RowId完全错误，分组模式下自然找不到目标节点。
2. 暴力展开所有分组：既不符合"仅展开目标节点祖先分组"的需求，也无法适配服务器端模式下折叠分组未加载子节点的场景，导致getRowNode返回undefined。

修正方案 #

1. 修复高亮函数逻辑 #

替换原highlightRow函数，改为精准展开目标节点的祖先分组，并利用AG Grid内置方法处理服务器端节点加载：

highlightRow(newRowId: string) {
  const targetRowId = `leaf-${newRowId}`; // 修正RowId拼接错误

  // 尝试获取目标节点
  let targetNode = this.gridApi.getRowNode(targetRowId);

  if (!targetNode) {
    // 服务器端模式下，自动触发祖先分组展开与节点加载
    this.gridApi.ensureNodeVisible({ rowId: targetRowId }, "middle", () => {
      targetNode = this.gridApi.getRowNode(targetRowId);
      targetNode ? this.highlightNode(targetNode) : console.warn("目标节点不存在:", targetRowId);
    });
  } else {
    // 展开所有祖先分组后高亮
    this.expandAncestorGroups(targetNode);
    this.highlightNode(targetNode);
  }
}

// 展开目标节点的所有祖先分组
private expandAncestorGroups(node: RowNode) {
  let currentParent = node.parent;
  while (currentParent) {
    if (currentParent.group) currentParent.setExpanded(true);
    currentParent = currentParent.parent;
  }
}

// 高亮并居中节点
private highlightNode(node: RowNode) {
  this.gridApi.ensureNodeVisible(node, "middle");
  this.gridApi.flashCells({
    rowNodes: [node],
    flashDuration: 5000,
    fadeDuration: 1000,
  });
}

2. 优化GetRowId配置（可选） #

用模板字符串简化分组节点ID生成逻辑，提升可读性：

public getRowId: GetRowIdFunc = (params: GetRowIdParams<IRequest>) => {
  const rowGroupCols = params.api.getRowGroupColumns();
  
  // 叶子节点：存在data.id且当前层级等于分组列总数
  if (params.data.id != null && params.level === rowGroupCols.length) {
    return `leaf-${params.data.id}`;
  }

  // 分组节点ID生成
  const groupColIds = rowGroupCols.map(col => col.getId()).join("-");
  const currentGroupCol = rowGroupCols[params.level];
  const groupValue = this.getValue(params.data, currentGroupCol.getColDef().field!);
  const parentKeysStr = (params.parentKeys?.map(key => key ?? "Others") || []).join("-");
  
  return `group-${groupColIds}-${parentKeysStr}${groupValue}`;
};

关键说明 #

• 利用ensureNodeVisible方法：AG Grid会自动处理服务器端模式下的分组展开与节点加载，无需手动设置定时器等待渲染。
• 精准展开祖先分组：仅展开目标节点的父级分组，避免不必要的性能开销。
• 拆分逻辑：将展开、高亮、居中功能拆分为独立方法，代码更易维护。

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