如何配置客户端AG Grid表格实现子行从独立API加载

我有一个雇主表格，需求是展开雇主行时，在下方子行中显示其角色变更历史，这些「版本历史子行」需通过独立后端接口获取，表格采用客户端加载模式（不使用服务端配置）。

我尝试用Tree Data方案：点击展开行时，将对应的子行数据添加到主rowData中并展开该行，但遇到问题：若初始无子行，展开/折叠图标不会显示，而我希望仅在展开行后再获取子行数据。

请问如何配置AG Grid实现该功能？

要实现初始显示展开图标、点击后动态加载子数据的效果，核心是让AG Grid认定每个父节点「存在展开可能性」，同时在展开触发时完成数据加载与表格更新，具体配置要点如下：

• 强制显示展开图标：通过getIsExpandable回调函数，让所有父节点始终显示展开/折叠图标，无需依赖初始子行数据。
• 绑定展开事件加载数据：使用onNodeExpanded事件（而非点击行事件）触发子数据加载，避免误触。
• 避免重复加载：给父节点数据添加标记位，判断是否已加载过子数据，防止重复调用接口。
• 更新表格并保持展开状态：获取子数据后更新rowData，调用setRowData刷新表格，再重新设置节点为展开状态。

// 初始行数据（来自API）
const rowData = [
  {
    id: 'erica', // 添加唯一ID用于标记
    orgHierarchy: ['Erica Rogers'],
    jobTitle: 'CEO',
    hasLoadedChildren: false // 标记是否已加载子数据
  },
  {
    id: 'jos',
    orgHierarchy: ['Jos Peeters'],
    jobTitle: 'CEO',
    hasLoadedChildren: false
  }
];

// 模拟后端接口获取角色变更历史
const fetchRoleHistory = (parentId) => {
  // 实际项目替换为真实API请求
  return new Promise(resolve => {
    setTimeout(() => {
      if (parentId === 'erica') {
        resolve([
          {
            orgHierarchy: ['Erica Rogers', 'Edited'],
            jobTitle: 'Exec. Vice President'
          }
        ]);
      } else if (parentId === 'jos') {
        resolve([
          {
            orgHierarchy: ['Jos Peeters', 'Edited'],
            jobTitle: 'Senior Manager'
          },
          {
            orgHierarchy: ['Jos Peeters', 'Promoted'],
            jobTitle: 'Executive Director'
          }
        ]);
      }
    }, 500);
  });
};

const gridOptions = {
  columnDefs: [
    { field: 'jobTitle' },
    { field: 'employmentType' },
  ],
  defaultColDef: {
    flex: 1,
  },
  autoGroupColumnDef: {
    headerName: 'Organisation Hierarchy',
    minWidth: 300,
    cellRendererParams: {
      suppressCount: true,
    },
  },
  rowData,
  treeData: true,
  animateRows: true,
  groupDefaultExpanded: -1,
  getDataPath: (data) => data.orgHierarchy,
  // 强制所有父节点显示展开图标
  getIsExpandable: (node) => true,
  // 节点展开时加载子数据
  onNodeExpanded: async (params) => {
    const parentData = params.node.data;
    
    // 跳过已加载的节点
    if (parentData.hasLoadedChildren) return;
    
    // 调用接口获取子数据
    const childRows = await fetchRoleHistory(parentData.id);
    
    // 添加子数据到主数据集
    rowData.push(...childRows);
    
    // 更新表格数据
    params.api.setRowData(rowData);
    
    // 标记已加载状态
    parentData.hasLoadedChildren = true;
    
    // 保持节点展开状态
    params.node.setExpanded(true);
  },
  // 设置行唯一ID，确保表格正确识别行数据
  getRowNodeId: (data) => data.orgHierarchy.join('_')
};

// 初始化表格（假设页面存在id为'grid'的容器）
document.addEventListener('DOMContentLoaded', () => {
  const gridDiv = document.querySelector('#grid');
  new agGrid.Grid(gridDiv, gridOptions);
});

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