Angular 5中Ag-Grid：实现指定行点击展开/折叠下方行

嘿，这个需求我之前做类似功能的时候刚好碰到过！Ag-Grid自带的分组功能确实依赖公共字段，但咱们这种没有统一分组列、还要控制顶部行不参与展开折叠的场景，完全可以通过自定义逻辑实现，给你整理了两个亲测可行的方案：

这个方案核心是给数据加标识字段，通过手动控制子行的显示隐藏来实现展开折叠，适合对布局和交互有特殊要求的场景。

步骤1：给数据添加标识字段 #

首先给你的行数据补充几个关键字段，用来区分顶部行、父行、子行，以及记录展开状态：

const rowData = [
  { id: 'top-1', name: '顶部行1', isTopRow: true }, // 顶部行，不参与展开
  { id: 'parent-1', name: '可展开父行1', isTopRow: false, isExpanded: false }, // 父行，可点击展开
  { id: 'child-1-1', name: '子行1-1', parentId: 'parent-1', isTopRow: false }, // 子行，属于parent-1
  { id: 'child-1-2', name: '子行1-2', parentId: 'parent-1', isTopRow: false },
  // ... 其他数据行
];

步骤2：配置列定义，添加展开/折叠按钮 #

在列定义里给父行加个自定义的展开按钮（也可以直接绑定整行点击事件）：

const columnDefs = [
  {
    headerName: '操作',
    cellRenderer: (params) => {
      // 只给非顶部、非子行的父行显示按钮
      if (!params.data.isTopRow && !params.data.parentId) {
        return `<button style="border:none; background:transparent; cursor:pointer" onclick="toggleRow('${params.data.id}')">
          ${params.data.isExpanded ? '▼' : '▶'}
        </button>`;
      }
      return '';
    },
    width: 50
  },
  { headerName: '名称', field: 'name' },
  // 其他业务列...
];

步骤3：实现展开/折叠逻辑 #

写一个toggleRow函数，用来切换父行的展开状态，并控制对应子行的显示隐藏：

function toggleRow(parentId) {
  const gridApi = window.gridOptions.api;
  // 找到父行节点，切换展开状态
  const parentNode = gridApi.getRowNode(parentId);
  parentNode.data.isExpanded = !parentNode.data.isExpanded;
  parentNode.setData(parentNode.data); // 更新视图

  // 遍历所有节点，设置对应子行的可见性
  gridApi.forEachNode(node => {
    if (node.data.parentId === parentId) {
      node.setRowVisible(parentNode.data.isExpanded);
    }
  });
}

步骤4：初始化时隐藏所有子行 #

在网格就绪后，默认把所有子行隐藏起来：

const gridOptions = {
  columnDefs,
  rowData,
  onGridReady: (params) => {
    window.gridOptions = gridOptions; // 方便全局调用toggleRow
    // 默认隐藏所有子行
    params.api.forEachNode(node => {
      if (node.data.parentId) {
        node.setRowVisible(false);
      }
    });
  },
  // 其他配置...
};

如果想复用Ag-Grid自带的分组展开/折叠UI（比如左侧的箭头），可以用这个方案，通过自定义节点子项逻辑来模拟分组：

步骤1：准备数据 #

同样需要给数据加isTopRow和parentId字段，和方案一一致。

步骤2：配置网格选项 #

核心是用getNodeChildDetails函数告诉Ag-Grid哪些行是父行、哪些是子行：

const gridOptions = {
  columnDefs,
  rowData,
  autoGroupColumnDef: {
    headerName: '', // 隐藏分组列的标题
    cellRendererParams: {
      suppressCount: true // 不显示分组内的行数
    }
  },
  rowGroupPanelShow: 'never', // 隐藏默认的分组面板
  groupDefaultExpanded: -1, // 默认所有分组都收起
  getNodeChildDetails: (data) => {
    // 顶部行没有子节点，不参与分组
    if (data.isTopRow) {
      return null;
    }
    // 父行返回它的子节点集合
    if (!data.parentId) {
      return {
        group: true,
        children: rowData.filter(item => item.parentId === data.id),
        expanded: data.isExpanded || false
      };
    }
    // 子行没有子节点
    return null;
  },
  // 给顶部行加样式区分
  getRowClass: (params) => {
    return params.data.isTopRow ? 'top-row-style' : '';
  },
  // 其他配置...
};

步骤3：自定义顶部行样式（可选） #

可以加CSS让顶部行和其他行区分开，比如：

.top-row-style {
  background-color: #f5f5f5;
  font-weight: bold;
}

• 如果是大数据量，方案一的forEachNode可能会有性能问题，这时候可以考虑用serverSide行模型，在后端处理子行的加载和过滤。
• 确保数据的id和parentId关联正确，避免出现子行找不到父行的情况。
• 如果需要支持多行展开，两个方案都可以同时处理多个父行的展开状态，互不影响。

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