企业官网建设流程全解析

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

【免费下载链接】ng-tableSimple table with sorting and filtering on AngularJS项目地址: https://gitcode.com/gh_mirrors/ng/ng-table

ng-table是 AngularJS 生态中经典的表格增强库，核心能力就是让普通 HTML 表格一键拥有排序、筛选、分页和分组。本文带你快速上手 ng-table 的排序功能：从表头点击切换升/降序，到用 API 编程式控制排序方向，并覆盖多列排序、默认方向配置等进阶技巧。

1. 一分钟开启排序：sortable 属性

ng-table 采用声明式风格——在<td>上加一个sortable属性，该列即可点击排序：

<ng-table class="table table-condensed" columns="columns" data="rows"> <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）：

排序值类型定义为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.ts）；
• params.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. 动手练手：官方排序示例

仓库自带三个循序渐进的演示页面，按顺序看即可：

1. demo-enabling.html —— 开启/禁用列排序；
2. demo-sorting-basic.html —— 基础点击排序；
3. 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