Ag-grid Master/Detail模式下修改详情单元格后如何获取全量数据？

当然有可行方法，核心是利用Ag-Grid的事件机制和主/详情行的数据关联特性，下面是两种实用的实现方式：

方法一：通过详情网格的onCellValueChanged事件直接获取 #

当详情单元格的值被修改时，onCellValueChanged事件会触发，你可以通过事件参数拿到当前修改的详情行，再通过详情网格的上下文获取对应的主行数据，最后组合出包含主/详情的完整数据。

// 定义详情网格配置
const detailGridOptions = {
  onCellValueChanged: (params) => {
    // 获取当前修改的详情行数据
    const updatedDetailRow = params.data;
    // 从详情网格上下文拿到对应的主行数据
    const masterRow = params.api.getGridOption('context').masterRow;
    
    // 组合完整数据（这里假设主行用detailRowData字段存储详情数组）
    const fullUpdatedData = {
      ...masterRow,
      detailRowData: [...masterRow.detailRowData] // 可选：浅拷贝避免直接修改原数组引发的意外
    };
    
    // 这里就可以使用fullUpdatedData做后续处理了
    console.log('完整更新数据:', fullUpdatedData);
  }
};

// 主网格的主/详情配置
const masterGridOptions = {
  masterDetail: true,
  detailCellRendererParams: {
    detailGridOptions,
    // 传递主行到详情网格的上下文
    getDetailRowData: (params) => {
      params.success(params.data.detailRowData);
      // 将主行存入详情网格的上下文
      params.detailGridOptions.context = { masterRow: params.data };
    }
  }
};

方法二：监听主网格的rowDataChanged事件 #

如果你的详情行数据是直接引用主行对象中的数组（即getDetailRowData直接返回主行的详情字段，而非深拷贝），那么修改详情行时，主行的对应字段会自动更新。此时监听主网格的rowDataChanged事件，就能拿到包含最新详情数据的完整主行数据。

const masterGridOptions = {
  masterDetail: true,
  detailCellRendererParams: {
    detailGridOptions: { /* 你的详情网格配置 */ },
    getDetailRowData: (params) => {
      // 直接返回主行的详情数组，确保双向引用
      params.success(params.data.detailRowData);
    }
  },
  rowDataChanged: (params) => {
    // 遍历所有主行，获取包含最新详情的完整数据
    params.api.forEachNode(node => {
      const fullRow = node.data;
      console.log('主行+最新详情:', fullRow);
    });
  }
};

关键注意事项 #

• 确保详情数据与主行数据是引用关联，而非独立拷贝，这样修改详情行时主行的详情字段会自动同步，无需额外手动更新。
• 如果你的详情数据是单独存储的（未挂载在主行对象上），需要在onCellValueChanged中手动更新主行对应的详情字段，或者维护一个主行ID与详情数据的映射表来关联两者。

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