如何使用 ag-grid 轻松处理前端表格中的嵌套行？

使用 ag-Grid 处理前端表格中的嵌套行可通过以下步骤实现，其核心功能包括无限嵌套、自定义展开规则及动态操作：

1. 安装依赖通过 npm 安装社区版（免费功能已支持嵌套行）：

   npm install ag-grid-community --save

2. 引入资源在 HTML 中加载 CSS 和 JS 文件（或通过模块化方式引入）：

   <link rel="stylesheet" href="ag-grid-community/dist/ag-grid.css"><script src="ag-grid-community/dist/ag-grid.js"></script>

3. 创建容器定义一个用于渲染表格的 DOM 元素：

   <div id="ag-container" style="height: 500px;"></div>

1. 启用树形数据模式在 gridOptions 中设置 rowModelType: 'treeData'，并启用主从详情功能：

   const gridOptions = { rowModelType: 'treeData', // 启用树形数据模式 masterDetail: true, // 允许行展开/折叠 animateRows: true, // 可选：添加展开动画 columnDefs: [ // 列定义（需包含数据层级字段） ]};

2. 定义数据结构数据需包含父子关系字段（如 group、children 或自定义字段）：

   const rowData = [ { id: 1, name: 'Parent 1', group: true, // 标记为可展开的父节点 children: [ // 子节点数组 { id: 11, name: 'Child 1.1', group: false }, { id: 12, name: 'Child 1.2', group: false } ] }, { id: 2, name: 'Parent 2', group: true, children: [...] }];

3. 自定义行展开逻辑

   通过 getDataPath 指定层级路径（适用于多级嵌套）：gridOptions.getDataPath = (data) => { return data.hierarchy; // 返回数组，如 ['Level1', 'Level2']};

   通过 isRowMaster 控制展开行为（动态判断行是否可展开）：gridOptions.getRowNodeId = (data) => data.id; // 唯一标识gridOptions.isRowMaster = (data) => data.group; // 仅 group=true 的行可展开

1. 动态加载子数据结合 masterDetail 和 API 实现懒加载：

   gridOptions.onGridReady = () => { grid.setRowData(initialData); // 初始数据};gridOptions.detailCellRendererParams = { detailGridOptions: { columnDefs: [...], // 子表格列定义 onGridReady: (params) => { params.api.sizeColumnsToFit(); // 自适应宽度 } }, getDetailRowData: (params) => { // 异步加载子数据（如通过 API 请求） fetchChildData(params.data.id).then(data => { params.successCallback(data); }); }};

2. 分组与筛选

   分组：使用 autoGroupColumnDef 配置分组列：gridOptions.autoGroupColumnDef = { headerName: 'Group', cellRendererParams: { suppressCount: true } // 不显示子行计数};

   筛选：启用过滤器并自定义逻辑：gridOptions.columnDefs = [ { field: 'name', filter: 'agTextColumnFilter', filterParams: { debounceMs: 500 } // 防抖 }];

3. API 动态操作

   展开/折叠所有行：grid.api.expandAll(); // 展开grid.api.collapseAll(); // 折叠

   获取当前展开状态：const expandedNodes = grid.api.getDisplayedRowAtIndex(0).expanded;

• 性能优化：大数据量时启用虚拟滚动（默认已支持）。
• 版本兼容性：确保 ag-Grid 版本与框架（如 React/Vue）的适配器版本匹配。
• 文档参考：更多配置详见
  ag-Grid 官方文档
  。

通过以上步骤，可快速实现复杂嵌套行表格，并灵活扩展分组、筛选和动态加载等功能。