AG Grid是一个功能强大的JavaScript数据表格库，可用于在网页应用程序中显示和编辑大量数据。在AG Grid中，可以使用主/细节模式来显示多个细节面板。

以下是一个使用AG Grid展示主/细节模式和多个细节面板的示例代码：

1. 导入AG Grid的相关模块和样式表：

import 'ag-grid-community/dist/styles/ag-grid.css';
import 'ag-grid-community/dist/styles/ag-theme-alpine.css';
import { GridOptions } from 'ag-grid-community';

2. 创建一个包含主/细节数据的示例数据集：

const rowData = [
  { id: 1, name: 'John Doe', age: 25, details: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.' },
  { id: 2, name: 'Jane Smith', age: 30, details: 'Pellentesque nec turpis in urna fermentum mattis.' },
  // ...
];

const detailRowData = [
  { id: 1, address: '123 Main St', phone: '555-1234' },
  { id: 2, address: '456 Elm St', phone: '555-5678' },
  // ...
];

3. 创建AG Grid的配置对象，并设置主/细节模式的相关选项：

const gridOptions: GridOptions = {
  columnDefs: [
    { headerName: 'ID', field: 'id', checkboxSelection: true },
    { headerName: 'Name', field: 'name' },
    { headerName: 'Age', field: 'age' },
  ],
  masterDetail: true,
  detailCellRendererParams: {
    detailGridOptions: {
      columnDefs: [
        { headerName: 'ID', field: 'id' },
        { headerName: 'Address', field: 'address' },
        { headerName: 'Phone', field: 'phone' },
      ],
      rowData: null,
      defaultColDef: { flex: 1 },
    },
    getDetailRowData: function(params) {
      params.successCallback(detailRowData.filter(row => row.id === params.data.id));
    },
  },
  rowData: rowData,
};

4. 在HTML页面中创建一个容器元素来承载AG Grid：

5. 在JavaScript中，使用AG Grid的API来创建和初始化Grid实例：

import { Grid } from 'ag-grid-community';

document.addEventListener('DOMContentLoaded', function() {
  const gridDiv = document.querySelector('#myGrid');
  new Grid(gridDiv, gridOptions);
});

运行以上代码，就可以在页面上看到一个包含主/细节模式和多个细节面板的AG Grid。

在这个示例中，主表格显示了每个人的ID、名称和年龄。当用户单击主表格的行时，会展开一个细节面板，显示与该行相关的详细信息，如地址和电话号码。

注意：以上代码示例使用了AG Grid社区版的模块和样式表。如果您使用的是企业版，请相应地更改导入语句和样式表的路径。