UI组件前端【免费下载链接】ng-zorro-antdAngular UI Component Library based on Ant Design项目地址https://gitcode.com/gh_mirrors/ng/ng-zorro-antd点击查看免费下载本篇指南聚焦 ng-zorro-antd 表格组件nz-table中“可控的筛选和排序”能力通过修改[nzSortOrder]与[nzFilters]两个输入属性即可在组件外部以代码方式指定当前列的排序方向与筛选条件实现重置筛选、重置排序、一键按年龄排序等典型交互。读完本文你将掌握这两个属性的双向绑定用法、底层触发链路th指令 → 表格数据服务 → 前端数据重算并能在自己的表格页面中直接落地一套“重置/排序工具栏”。一、场景为什么需要“可控”的筛选与排序在默认的nz-table中用户通过点击表头完成排序、通过表头筛选下拉完成过滤这些状态由组件内部维护。但很多真实业务要求状态由业务代码接管例如提供一个“清除筛选”“清除排序”按钮一键恢复表格初始状态页面加载后默认按某个字段降序排列下拉筛选后回填到表格、并把当前筛选条件展示在外部面板中切换查询条件时把已选排序/筛选重置为初始值。ng-zorro-antd 为这类需求提供了两个可直接编程控制的输入属性[nzSortOrder]当前排序状态支持双向绑定与[nzFilters]过滤器内容通过设置byDefault默认应用过滤规则。官方示例位于 reset-filter.md 与配套的 reset-filter.ts对应演示组件nz-demo-table-reset-filter。二、核心 APInzSortOrder与nzFilters这两个属性均定义在th单元格增强指令NzThAddOnComponent上th-addon.component.ts相关类型定义见 table.types.ts。2.1 排序状态[nzSortOrder]参数说明类型默认值[nzSortOrder]当前排序状态可双向绑定ascend \| descend \| nullnull(nzSortOrderChange)排序状态改变回调EventEmitterascend \| descend \| null-null表示不排序ascend升序descend降序使用[(nzSortOrder)]column.sortOrder即可实现双向绑定点击表头产生的排序变化会写回column.sortOrder反向修改column.sortOrder也会驱动表头 UI 与数据重排排序函数[nzSortFn]参考Array.prototype.sort的 compareFunction前端排序时传入函数、服务端排序时传入true支持的排序方向由[nzSortDirections]控制默认[ascend, descend, null]。从源码看NzThAddOnComponent.ngOnChanges中一旦检测到nzSortOrder变化就会同步内部sortOrder并触发setSortOrderth-addon.component.ts随后通过nzSortOrderChange事件与calcOperatorChange$通知数据服务重算。这意味着只要改绑定值排序就会被立即执行这正是“可控”的底层保证。2.2 筛选状态[nzFilters]参数说明类型默认值[nzFilters]过滤器内容显示数据text回调传出value设置byDefault默认应用过滤规则Array{ text: string; value: any; byDefault?: boolean }-[nzFilterFn]前端筛选时确定过滤的运行函数服务端筛选时传入trueNzTableFilterFnT \| boolean-[nzFilterMultiple]是否为多选过滤器booleantrue(nzFilterChange)过滤器内容选择的 value 数据回调EventEmitterany[] \| any-每个过滤项形如{ text: Joe, value: Joe }text用于表头下拉菜单展示value会作为参数传给filterFnbyDefault: true表示该项默认选中、默认应用过滤规则——这是“可控筛选”的关键开关源码在ngOnChanges中据此计算nzFilterValueth-addon.component.tsfilterFn类型为(value: NzTableFilterValue, data: T) boolean返回true的行保留false的行被过滤多选模式下value以数组传入list.some(...)模式单选模式nzFilterMultiplefalse下传入单个值。2.3 数据重算的底层链路thead组件thead.component.ts收集所有NzThAddOnComponent把每列的sortFn / sortOrder / filterFn / filterValue / sortPriority汇总成算子列表推送给NzTableDataService该服务table-data.service.ts在listOfDataAfterCalc$中先执行过滤算子filterValue为空即跳过再按sortPriority降序执行排序算子ascend直接返回比较结果descend取反最后切片出当前页数据。因此控制nzSortOrder/nzFilters等价于控制整条前端数据管道。三、完整示例可重置的排序与筛选官方演示 reset-filter.ts 提供了一份可直接运行的最小实现三列Name / Age / Address外加三个操作按钮——“按年龄排序”“清除筛选”“清除筛选与排序”。3.1 列配置与数据定义interface ItemData { name: string; age: number; address: string; } interface ColumnItem { name: string; sortOrder: NzTableSortOrder | null; sortFn: NzTableSortFnItemData | null; listOfFilter: NzTableFilterList; filterFn: NzTableFilterFnItemData | null; }类型NzTableSortOrder、NzTableSortFnT、NzTableFilterList、NzTableFilterFnT均从ng-zorro-antd/table导出见 public-api.ts。NzTableFilterList定义为Array{ text: string; value: NzSafeAny; byDefault?: boolean }table.types.ts。3.2 模板双向绑定表头nz-table #filterTable [nzData]listOfData nzTableLayoutfixed thead tr for (column of listOfColumns; track column.name) { th [(nzSortOrder)]column.sortOrder [nzSortFn]column.sortFn [nzFilters]column.listOfFilter [nzFilterFn]column.filterFn {{ column.name }} /th } /tr /thead tbody for (data of filterTable.data; track data) { tr td{{ data.name }}/td td{{ data.age }}/td td{{ data.address }}/td /tr } /tbody /nz-table操作区模块需引入NzButtonModulediv classtable-operations button nz-button (click)sortByAge()Sort age/button button nz-button (click)resetFilters()Clear filters/button button nz-button (click)resetSortAndFilters()Clear filters and sorters/button /div组件导入imports: [NzButtonModule, NzTableModule]。3.3 业务方法三种控制方式sortByAge(): void { this.listOfColumns.forEach(item { if (item.name Age) { item.sortOrder descend; } else { item.sortOrder null; } }); } resetFilters(): void { this.listOfColumns.forEach(item { if (item.name Name) { item.listOfFilter [ { text: Joe, value: Joe }, { text: Jim, value: Jim } ]; } else if (item.name Address) { item.listOfFilter [ { text: London, value: London }, { text: Sidney, value: Sidney } ]; } }); } resetSortAndFilters(): void { this.listOfColumns.forEach(item { item.sortOrder null; }); this.resetFilters(); }要点解读sortByAge()把 Age 列的sortOrder设为descend同时把其余列置为null实现“单一列排序”。由于nzSortPriority默认为false点击任意表头时组件内部也会自动清除其他列的排序状态见 thead.component.ts 中对手动点击排序的清理逻辑resetFilters()筛选状态体现在“哪些过滤项被选中”由nzFilters列表中每一项的checked状态决定。把listOfFilter重新赋值为初始数组且不含byDefault: true项即清空已选筛选。若希望默认应用某些筛选可在初始项上加byDefault: true例如 sort-filter.ts 中{ text: Jim, value: Jim, byDefault: true }resetSortAndFilters()组合两者先把所有sortOrder置null再重置筛选数组一次性恢复初始状态。注意列表中的filterFn参数类型随nzFilterMultiple变化——多选时为数组list: string[]单选时为单值address: string示例两种写法均有体现可直接对照 reset-filter.ts。四、关联能力byDefault与nzFilterMultiple若要更细粒度地控制初始筛选状态可结合以下两点byDefault: true某过滤项默认选中并立即生效。源码中ngOnChanges在(nzFilters || nzFilterMultiple) nzShowFilter时计算默认选中值多选模式收集所有byDefault项的value组成数组单选模式取第一个或nullth-addon.component.ts。这是实现“页面打开即已过滤”的最简方式nzFilterMultiplefalse表头下拉从 checkbox 多选切换为 radio 单选filterFn收到的value变为单个值适合“城市互斥”类业务如 Address 列。完整对照可参考另一官方演示 sort-filter.ts含byDefault、单选/多选混合配置与 sort-filter.md。五、测试验证可控性由规范测试保证th的排序/筛选行为有配套单测覆盖位于 th.spec.ts通过[(nzSortOrder)]sort双向绑定并监听(nzSortOrderChange)验证排序状态回写通过[nzFilters]nameList与(nzFilterChange)验证筛选 value 回调与filterFn的联动还有对应表头整体行为测试 thead.spec.ts。这说明“修改绑定值 → 状态变化 → 数据重算”是官方承诺并持续回归保障的稳定行为可在业务中放心使用。六、进阶与nzQueryParams或服务端查询配合当表格数据来自后端时可把[nzSortOrder]/[nzFilters]与表格的nzQueryParams输出结合每次排序、筛选或分页变化NzTableDataService都会产出结构化的NzTableQueryParams含pageIndex / pageSize / sort / filter数组见 table-data.service.ts业务代码据此发起接口请求同样地重置按钮通过上述方式把绑定值复位后也会触发一次新的查询参数发射实现“重置即刷新”。前端数据管道与服务端查询参数共享同一份listOfCalcOperator$状态双向绑定的可控方式与后端取数天然兼容。七、小结控制排序修改[(nzSortOrder)]绑定的值ascend / descend / null分别对应升序、降序、不排序控制筛选修改[nzFilters]数组内容选中态由内部管理重置时重新赋初始数组byDefault: true用于默认应用过滤组合重置遍历列配置sortOrder null并恢复listOfFilter初始值即可一键还原底层原理th增强指令收集算子 →NzTableDataService先过滤后排序 → 分页切片任何可控赋值都会沿这条管道立即生效。参考实现reset-filter.ts、reset-filter.md相关文档table 组件 API、index.en-US.md。赞分享UI组件前端【免费下载链接】ng-zorro-antdAngular UI Component Library based on Ant Design项目地址https://gitcode.com/gh_mirrors/ng/ng-zorro-antd点击查看免费下载相关推荐SeaTunnel Redis Sink 连接器完全指南单机/集群写入、自定义 Key、多表与 Schema 演进实战SeaTunnel Redis Sink 连接器完全指南单机/集群写入、自定义 Key、多表与 Schema 演进实战 本文以 docs/en/connectUI组件前端ng-zorro-antd Table 远程加载数据Ajax实战服务端分页、排序与筛选ng zorro antd Table 远程加载数据Ajax实战服务端分页、排序与筛选 本文以 ng zorro antd Table 组件的 ajaxUI组件前端ng-zorro-antd Grid 排序实战用 nzOrder 精确控制 24 栅格列顺序ng zorro antd Grid 排序实战用 nzOrder 精确控制 24 栅格列顺序 在 ng zorro antd 的 Grid 栅格系统中列cUI组件前端上一篇GitHub中文化插件3分钟让英文界面秒变中文的终极指南下一篇GitHub中文化插件3分钟快速安装彻底告别英文界面的终极解决方案创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考