ng-table 数据分组实战从一键分组到自定义分组函数与汇总行的完整指南【免费下载链接】ng-tableSimple table with sorting and filtering on AngularJS项目地址: https://gitcode.com/gh_mirrors/ng/ng-tableng-table是 AngularJS 生态中最经典的数据表格组件内置排序、筛选、分页能力而它的数据分组Grouping功能则能把一张平铺表格瞬间变成分层清晰的分组视图。本文带你从零开始掌握 ng-table 分组的 4 种用法一键启用分组、按列参数分组、自定义分组函数以及为每组添加汇总行看完即可在你的 AngularJS 项目中落地。️ 什么是 ng-table 数据分组默认情况下ng-table 把所有数据行平铺展示。启用分组后表格会先按某一列的值聚堆生成一行加粗的组头行Group Header Row点击箭头还能展开/折叠每一组。它特别适合这类场景按国家/部门/地区汇总客户列表按状态归类工单、订单需要为每组计算合计、平均等汇总值分组的核心实现位于 src/core/grouping/ 目录其中 ngTableDefaultGetGroups.ts 负责把原始数据切分成一个个组。 一键分组3 种启用方式方式一表头下拉选择器UI 操作只要某个列声明了可分组属性表头就会自动出现分组选择器。用户点击表头即可切换分组列td sortablename>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-startuser in group.data.../tr tr ng-repeat-end classsummary td colspan3 strong合计/strong{{ groupSumMoney(group) }} /td /tr官方分组 汇总行示例位于 demo-site/views/grouping/demo-summary.html。 分组行为配置展开与排序分组行为由groupOptions统一控制定义见 groupSettings.ts配置项默认值作用isExpandedtrue初始时各组是否展开显示defaultSortasc分组名默认排序方向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），仅供参考