ng-table 数据分组实战：从一键分组到自定义分组函数与汇总行的完整指南
【免费下载链接】ng-tableSimple table with sorting and filtering on AngularJS项目地址: https://gitcode.com/gh_mirrors/ng/ng-table
ng-table是 AngularJS 生态中最经典的数据表格组件，内置排序、筛选、分页能力，而它的数据分组（Grouping）功能则能把一张平铺表格瞬间变成分层清晰的分组视图。本文带你从零开始，掌握 ng-table 分组的 4 种用法：一键启用分组、按列参数分组、自定义分组函数，以及为每组添加汇总行，看完即可在你的 AngularJS 项目中落地。
🗂️ 什么是 ng-table 数据分组？
默认情况下，ng-table 把所有数据行平铺展示。启用分组后，表格会先按某一列的值"聚堆"，生成一行加粗的组头行（Group Header Row），点击箭头还能展开/折叠每一组。
它特别适合这类场景：
- 按国家/部门/地区汇总客户列表
- 按状态归类工单、订单
- 需要为每组计算合计、平均等汇总值
分组的核心实现位于 src/core/grouping/ 目录，其中 ngTableDefaultGetGroups.ts 负责把原始数据切分成一个个组。
🚀 一键分组：3 种启用方式
方式一：表头下拉选择器（UI 操作）
只要某个列声明了可分组属性，表头就会自动出现分组选择器。用户点击表头即可切换分组列：
<td sortable="'name'">tableParams = new NgTableParams( { group: 'country' }, // 初始按 country 分组 { dataset: demoData } );配套模板 grouped-table.component.html 展示了如何用ng-repeat-start/ng-repeat-end渲染组头行与组内行，并通过group.$hideRows控制折叠。
方式三：程序化切换分组列
运行期间可以随时调用params.group()读取或切换分组，实现"一键换维度"：
- 单参数调用
group('city', 'desc')→ 按 city 降序分组 - 不传参调用
group()→ 获取当前分组配置
相关方法定义在 ngTableParams.ts。官方分组 API 演示位于 demo-site/views/grouping/demo-api.html。
⚙️ 自定义分组函数：当一个字段不够用
内置分组只按"列值"分组。如果你需要逻辑分组（比如"年龄 > 50 → 大龄组，其余 → 青年组"），可以传入一个函数替代字段名：
tableParams.group(function (item) { return item.age > 50 ? 'Senior' : 'Junior'; });函数返回值即为组名，还支持sortDirection属性控制组的排列方向。实现原理在 ngTableDefaultGetGroups.ts：判断传入的是函数还是字段名，再逐行求值归类。官方演示见 demo-grouping-fn.html。
📊 汇总行：给每组加一个"小计"
分组之后最常见的诉求是：每组底部显示金额合计。做法是用模板自定义组内行的渲染，在最后一行追加汇总单元格：
<tr ng-repeat-start="user in group.data">...</tr> <tr ng-repeat-end class="summary"> <td colspan="3"> <strong>合计：</strong>{{ groupSumMoney(group) }} </td> </tr>官方"分组 + 汇总行"示例位于 demo-site/views/grouping/demo-summary.html。
🔧 分组行为配置：展开与排序
分组行为由groupOptions统一控制，定义见 groupSettings.ts：
| 配置项 | 默认值 | 作用 |
|---|---|---|
isExpanded | true | 初始时各组是否展开显示 |
defaultSort | 'asc' | 分组名默认排序方向（asc/desc） |
修改方式很直接：
tableParams.settings().groupOptions = { isExpanded: false };💡 实战小贴士与常见坑
- 嵌套字段分组：分组字段支持点号路径，如
group: 'address.city'，取值逻辑参考 ngTableDefaultGetGroups.ts 中的getPath实现。 - 一次只支持一个分组维度：源码注释明确标注"currently support for only one group"，需要多层分组时可组合自定义函数返回复合键。
- 分组会绕过分页：分组时先拉取全量数据再切组，最后才对"组"分页（见 ngTableDefaultGetGroups.ts），大数据量下请注意性能。
- 分页 + 分组可叠加：分组行同样受
pageSize约束，翻页切换的是"组"而不是"行"。
总结
ng-table 的分组功能提供了从简到繁的完整路径：groupable列属性实现零代码一键分组，group参数实现初始分组，params.group()实现动态切换，自定义函数实现逻辑分组，模板扩展实现汇总行。配合groupOptions控制展开与排序，足以覆盖绝大多数"分组报表"需求。更多分组演示可逛一逛 demo-site/views/grouping/ 目录，项目整体介绍见 README.md。
【免费下载链接】ng-tableSimple table with sorting and filtering on AngularJS项目地址: https://gitcode.com/gh_mirrors/ng/ng-table
创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
