ng-table排序功能完全指南：一键切换排序方向+API编程式控制排序

ng-table排序功能完全指南一键切换排序方向API编程式控制排序【免费下载链接】ng-tableSimple table with sorting and filtering on AngularJS项目地址: https://gitcode.com/gh_mirrors/ng/ng-tableng-table是 AngularJS 生态中经典的表格增强库核心能力就是让普通 HTML 表格一键拥有排序、筛选、分页和分组。本文带你快速上手 ng-table 的排序功能从表头点击切换升/降序到用 API 编程式控制排序方向并覆盖多列排序、默认方向配置等进阶技巧。1. 一分钟开启排序sortable 属性ng-table 采用声明式风格——在td上加一个sortable属性该列即可点击排序ng-table classtable table-condensed columnscolumns datarows td>const defaultSort this.$scope.params.settings().defaultSort; const inverseSort: SortDirection (defaultSort asc ? desc : asc); // 再次点击同一列 → 切换到反方向 sortingParams[parsedSortable] (sorting ? inverseSort : defaultSort); this.$scope.params.parameters({ sorting: sortingParams });源码位置ngTableSorterRowController.ts表头还会根据当前排序状态自动添加sort-asc/sort-desc类名配合 ng-table.scss 中的样式展示箭头指示器模板见 sorterRow.html。️ 技巧按住 Ctrl / Cmd 实现多列排序点击表头时按住 Ctrl或 Mac 上的 Cmd键ng-table 会保留其他列的排序状态只修改当前列的方向从而组成多列排序组合。这是阅读 ngTableSorterRowController.ts 中ctrlKey || metaKey判断逻辑得到的实用技巧。3. API 编程式控制排序params.sorting()除了用户点击你还可以在代码中完全掌控排序。NgTableParams提供了sorting方法支持三种调用方式ngTableParams.ts调用方式作用params.sorting()读取当前排序对象如{ name: asc }params.sorting(age, desc)按指定字段方向排序会替换旧排序params.sorting({ a: asc, b: desc })一次设置多列排序组合排序值类型定义为SortDirection asc | desc和SortingValues见 sorting/index.ts。// 初始化时即按 age 降序 var params new NgTableParams({ sorting: { age: desc } }, { dataset: rows }); // 按钮事件中动态改排序 scope.setAscName function () { scope.params.sorting(name, asc); };判断与联动isSorting() 和 orderBy 格式params.isSorting(age, asc)判断当前是否按指定字段方向排序适合给按钮打已激活状态ngTableParams.tsparams.sortingForOrderBy()把 ng-table 排序值转成 Angular$orderBy过滤可直接消费的格式ngTableParams.ts。4. 修改默认排序方向 defaultSort表头第一次被点击时的方向由defaultSort设置项决定默认值是desc/** * The default sort direction that will be used whenever a sorting is supplied * that does not define its own sort direction */ defaultSort: SortDirection desc;源码见 ngTableSettings.ts。想让表格默认点击即升序var params new NgTableParams({ sorting: { name: asc } }, { dataset: rows, defaultSort: asc });5. 排序在数据加载中的位置排序变化会标记isDataReloadRequired为 true触发getData重新取数——本地数据由内置管道直接排序服务端分页场景则应把sorting参数带到后端 SQL 的ORDER BY中参数序列化逻辑见 ngTableParams.ts。6. 常见问题速查 某列点击无反应确认sortable值是字符串字段名而非false且该列show()返回 true箭头样式不对sortingIndicator支持span/div两种指示器形态sorterRow.html排序值被意外清空sorting()的 setter 语义是整体替换多列排序请先读取旧值再合并或直接用 Ctrl点击表头。7. 动手练手官方排序示例仓库自带三个循序渐进的演示页面按顺序看即可demo-enabling.html —— 开启/禁用列排序demo-sorting-basic.html —— 基础点击排序demo-api.html —— 用 API 编程式切换排序。配合 README.md 中的表格用法总览你已可覆盖绝大多数 ng-table 排序场景。想要更进一步服务端排序、自定义比较函数可继续阅读 interceptor.ts 与 ngTableDefaultGetData.ts 了解数据管道全貌。【免费下载链接】ng-tableSimple table with sorting and filtering on AngularJS项目地址: https://gitcode.com/gh_mirrors/ng/ng-table创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考