AG Grid实战：用‘列组伸缩’和‘行组展开’构建一个清晰的学生成绩分析表
AG Grid实战：用‘列组伸缩’和‘行组展开’构建清晰的学生成绩分析表
在数据密集型的教育管理系统中，如何高效呈现学生成绩数据一直是开发者面临的挑战。传统的表格往往因为信息过载而显得杂乱无章，而简单的折叠功能又难以满足多层级分析需求。这正是AG Grid的列组伸缩和行组展开功能大显身手的地方。
想象一下这样的场景：学校管理员需要同时查看全校各年级、班级的成绩分布，又要能快速聚焦到某个学生的单科表现；教研组长希望比较不同班级的数学平均分，而班主任则关心自己班级学生的偏科情况。一个设计良好的成绩分析表，应该像瑞士军刀一样灵活多变，而AG Grid正是打造这种工具的绝佳选择。
1. 环境准备与基础配置
在开始构建复杂的学生成绩表之前，我们需要确保开发环境正确设置。AG Grid支持React、Angular、Vue等主流前端框架，这里以React为例演示基础配置：
npm install ag-grid-react ag-grid-community基础表格的初始化配置如下：
import { AgGridReact } from 'ag-grid-react'; import 'ag-grid-community/styles/ag-grid.css'; import 'ag-grid-community/styles/ag-theme-alpine.css'; function GradeTable() { const [rowData, setRowData] = useState([]); // 基础列定义 const [columnDefs, setColumnDefs] = useState([ { field: 'name', headerName: '学生姓名' }, { field: 'class', headerName: '班级' }, { field: 'grade', headerName: '年级' } ]); return ( <div className="ag-theme-alpine" style={{ height: 600 }}> <AgGridReact rowData={rowData} columnDefs={columnDefs} /> </div> ); }提示：使用ag-theme-alpine主题前需确保已导入对应的CSS文件，这是AG Grid提供的现成美观样式方案。
2. 构建多级列组结构
学生成绩数据通常包含多个学科和多类统计指标，直接平铺展示会导致表格过宽。列组功能可以将相关列逻辑分组，用户可按需展开或收起。
2.1 定义学科成绩列组
将语文、数学、英语等学科成绩归入"学科成绩"组：
const [columnDefs, setColumnDefs] = useState([ { headerName: '基本信息', children: [ { field: 'name', headerName: '姓名' }, { field: 'studentId', headerName: '学号' } ] }, { headerName: '学科成绩', children: [ { headerName: '语文', children: [ { field: 'chinese.score', headerName: '分数' }, { field: 'chinese.rank', headerName: '排名' } ] }, { headerName: '数学', children: [ { field: 'math.score', headerName: '分数' }, { field: 'math.rank', headerName: '排名' } ] } ] } ]);2.2 配置列组伸缩功能
通过columnGroupShow属性控制列组的默认显示状态：
{ headerName: '详细成绩', columnGroupShow: 'closed', // 初始为收起状态 children: [ { field: 'physics', headerName: '物理' }, { field: 'chemistry', headerName: '化学' } ] }实际效果对比如下：
| 配置选项 | 效果描述 |
|---|---|
| columnGroupShow: 'open' | 列组默认展开 |
| columnGroupShow: 'closed' | 列组默认收起 |
| 不设置该属性 | 列组始终显示，不可收起 |
3. 实现智能行分组策略
行分组功能让数据可以按年级、班级等维度自动分层展示，配合展开/收起操作实现数据的钻取分析。
3.1 基础行分组配置
const gridOptions = { // 启用行分组 groupDisplayType: 'groupRows', // 默认展开到班级层级 groupDefaultExpanded: 1, columnDefs: [ { field: 'grade', rowGroup: true, hide: true }, // 按年级分组 { field: 'class', rowGroup: true, hide: true }, // 按班级分组 { field: 'name', headerName: '学生姓名' } ] };3.2 分组显示优化技巧
为提升分组行的可读性，可以使用aggFunc和cellRenderer自定义显示内容：
{ field: 'math.score', headerName: '数学平均分', aggFunc: 'avg', cellRenderer: params => { if (params.node.group) { return params.value.toFixed(1); } return params.value; } }常用聚合函数选项：
sum: 求和avg: 平均值min: 最小值max: 最大值count: 计数
4. 高级交互增强实践
基础功能实现后，我们可以通过一些高级技巧进一步提升用户体验。
4.1 保存和恢复用户布局
使用AG Grid的API保存用户的列状态：
const saveLayout = () => { const columnState = gridApi.getColumnState(); localStorage.setItem('gradeTableLayout', JSON.stringify(columnState)); }; const restoreLayout = () => { const savedLayout = localStorage.getItem('gradeTableLayout'); if (savedLayout) { gridApi.setColumnState(JSON.parse(savedLayout)); } };4.2 响应式布局适配
通过监听窗口大小变化动态调整表格尺寸：
useEffect(() => { const handleResize = () => { gridApi.sizeColumnsToFit(); }; window.addEventListener('resize', handleResize); return () => window.removeEventListener('resize', handleResize); }, [gridApi]);4.3 性能优化建议
当处理大规模数据时（如全校多年级成绩），这些配置可以提升性能：
const gridOptions = { rowBuffer: 50, // 预渲染的行数 animateRows: false, // 禁用行动画 suppressDragLeaveHidesColumns: true, suppressMakeColumnVisibleAfterUnGroup: true };5. 实战案例：年级成绩对比视图
让我们通过一个完整案例演示如何将这些功能组合应用。假设我们需要实现以下需求：
- 默认按年级→班级两级分组
- 学科成绩初始只显示总分
- 用户可以展开查看各科详细分数
实现代码：
const [columnDefs, setColumnDefs] = useState([ { headerName: '学生信息', children: [ { field: 'name', headerName: '姓名', width: 120 }, { field: 'gender', headerName: '性别', width: 80 } ] }, { headerName: '总分', columnGroupShow: 'open', children: [ { field: 'total', headerName: '总分', width: 100 } ] }, { headerName: '学科详情', columnGroupShow: 'closed', children: [ { headerName: '理科', children: [ { field: 'math', headerName: '数学' }, { field: 'physics', headerName: '物理' } ] }, { headerName: '文科', children: [ { field: 'chinese', headerName: '语文' }, { field: 'english', headerName: '英语' } ] } ] } ]); const gridOptions = { groupDisplayType: 'groupRows', groupDefaultExpanded: 1, columnDefs: columnDefs, defaultColDef: { sortable: true, filter: true, resizable: true } };在实际项目中，这种布局方式使管理员可以快速把握整体情况，又能在需要时深入查看细节数据。通过合理设置默认展开层级和列组状态，我们有效平衡了信息密度和可读性。