Angular Ag-Grid实现行展开显示额外数据的技术问询

我刚好做过类似的需求，给你分享几个实用的方案，应该能完美匹配你的需求！

方案1：用Ag-Grid官方的Master/Detail（主从表）功能 #

这是官方专门为「主数据+展开详情」场景设计的功能，配置简单，还能复用Ag-Grid的特性，非常适合你的需求。

核心配置步骤： #

1. 开启Master/Detail模式：在Grid选项中设置masterDetail: true
2. 定义核心列：只保留你需要展示的核心数据列，比如ID、名称等
3. 配置详情渲染器：可以选择用子网格展示详情，或者直接用自定义Angular组件渲染表单视图

代码示例（Angular）：

import { Component } from '@angular/core';
import { GridOptions } from 'ag-grid-community';
import { YourDetailFormComponent } from './your-detail-form.component';

@Component({
  selector: 'app-your-grid',
  templateUrl: './your-grid.component.html'
})
export class YourGridComponent {
  gridOptions: GridOptions = {
    columnDefs: [
      // 核心数据列
      { field: 'id', headerName: 'ID', width: 80 },
      { field: 'name', headerName: '核心名称', flex: 1 },
      // 自定义展开按钮（也可以用默认的分组图标）
      {
        field: 'expand',
        headerName: '',
        width: 50,
        cellRenderer: 'agGroupCellRenderer',
        cellRendererParams: {
          suppressCount: true, // 隐藏默认的分组计数
          iconExpanded: '🔽', // 自定义展开图标
          iconCollapsed: '🔼' // 自定义收起图标
        }
      }
    ],
    masterDetail: true,
    // 配置详情渲染器：用自定义Angular组件展示表单
    detailCellRendererFramework: YourDetailFormComponent,
    // 可选：点击行任意位置触发展开/收起
    onRowClicked: (event) => {
      event.node.setExpanded(!event.node.expanded);
    },
    rowSelection: 'single', // 可选：限制同时展开一行
    pagination: true // 大数据集建议开启分页
  };

  // 你的数据源
  rowData = [
    { id: 1, name: '数据1', address: 'XX街道XX号', phone: '138XXXXXXX', email: 'test1@xxx.com' },
    { id: 2, name: '数据2', address: 'YY街道YY号', phone: '139XXXXXXX', email: 'test2@xxx.com' }
  ];
}

自定义详情表单组件：

在YourDetailFormComponent中，通过@Input()接收行数据，然后用Angular表单布局展示详情：

import { Component, Input } from '@angular/core';
import { IDetailCellRendererParams } from 'ag-grid-community';

@Component({
  template: `
    <div class="detail-form">
      <h4>详情信息</h4>
      <div class="form-row">
        <label>地址:</label>
        <span>{{ params.data.address }}</span>
      </div>
      <div class="form-row">
        <label>电话:</label>
        <span>{{ params.data.phone }}</span>
      </div>
      <div class="form-row">
        <label>邮箱:</label>
        <span>{{ params.data.email }}</span>
      </div>
      <!-- 更多详情字段... -->
    </div>
  `,
  styles: [`
    .detail-form { padding: 15px; background: #f8f9fa; border-top: 1px solid #eee; }
    .form-row { margin: 8px 0; display: flex; gap: 10px; }
    label { width: 60px; font-weight: bold; }
  `]
})
export class YourDetailFormComponent {
  @Input() params!: IDetailCellRendererParams;
}

方案2：自定义行展开+全宽表单渲染 #

如果需要完全自定义展开区域的样式（比如更复杂的表单布局），可以用这个方案，手动控制行高度和展开内容。

核心配置步骤： #

1. 动态行高度：通过getRowHeight根据行的展开状态设置不同高度
2. 自定义展开按钮：在单元格中渲染按钮，点击切换展开状态
3. 全宽单元格渲染：用fullWidthCellRendererFramework渲染表单内容

代码示例：

this.gridOptions = {
  columnDefs: [
    { field: 'id', headerName: 'ID', width: 80 },
    { field: 'name', headerName: '核心名称', flex: 1 },
    {
      field: 'expand',
      headerName: '',
      width: 50,
      cellRenderer: (params) => {
        const btn = document.createElement('button');
        btn.textContent = params.node.expanded ? '收起' : '展开';
        btn.style.border = 'none';
        btn.style.background = 'transparent';
        btn.addEventListener('click', () => {
          params.node.setExpanded(!params.node.expanded);
          params.api.onRowHeightChanged(); // 触发行高度更新
        });
        return btn;
      }
    }
  ],
  // 动态设置行高度：展开后300px，默认50px
  getRowHeight: (params) => params.node.expanded ? 300 : 50,
  // 全宽渲染表单组件
  fullWidthCellRendererFramework: YourDetailFormComponent,
  // 只有展开的行才显示全宽表单
  isFullWidthCell: (params) => params.node.expanded,
  getRowNodeId: (data) => data.id, // 确保行节点唯一
  onRowHeightChanged: () => {
    this.gridOptions.api?.sizeColumnsToFit(); // 适配列宽
  }
};

注意事项 #

• 性能优化：如果数据集很大，建议开启分页或虚拟滚动，同时限制同时展开的行数（比如rowSelection: 'single'）
• 样式自定义：可以通过Ag-Grid的CSS类名（比如.ag-detail-cell-wrapper）修改详情区域的样式
• 数据更新：如果详情数据需要动态更新，确保组件能监听params.data的变化（比如用ngOnChanges）

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