ng-table过滤功能深度剖析文本、数字、Select、嵌套属性6大过滤器详解【免费下载链接】ng-tableSimple table with sorting and filtering on AngularJS项目地址: https://gitcode.com/gh_mirrors/ng/ng-tableng-table 是一款运行在 AngularJS 上的表格组件它内置的过滤功能是新手最容易上手、也最实用的特性之一只需在表头下方开启一行过滤控件就能让用户按文本、数字、下拉选项甚至嵌套属性对表格数据实时筛选。本文带你快速理解 ng-table 过滤器的工作原理、6 大类过滤器的配置方式和常用调优参数。过滤功能如何启用一行配置开启实时筛选ng-table 的过滤入口是ng-table指令上的ng-table-filter属性。把它设为true组件就会在表头下方自动渲染一整行过滤输入框模板来源见 filterRow.html。table classtable ng-tableparams show-filtertrue启用后用户每输入一个字符组件会等待一小段停顿再重新计算数据——默认是500 毫秒的防抖filterDelay避免每次击键都触发重算这个参数定义在 FilterSettings 中filterDelay 500用户停止输入后多久应用过滤filterDelayThreshold 10000数据量小于 1 万条的小数组会跳过防抖实现边输边筛的即时体验filterLayout一列有多个过滤控件时的排版方式stack上下堆叠默认或horizontal水平排列6 大过滤器逐一拆解内置的过滤控件模板都放在 src/browser/filters/ 目录下每种过滤器对应一个 HTML 模板文件。1. 文本过滤器text——默认的模糊匹配模板文件text.html每个列默认使用文本过滤。输入内容时ng-table 会执行不区分大小写的子串匹配比如数据里有 Apple、apple pie输入 apple 两者都会被筛出。这是最常见的搜索场景无需任何额外配置。2. 数字过滤器number模板文件number.html当列配置里指定filter: number时表头输入框会渲染为input typenumber只接受数字输入。适合金额、数量等数值列的精确筛选。3. Select 下拉过滤器select模板文件select.html下拉框的数据来源是列定义中的data属性。它支持两种写法静态数组直接传入[{ id: 1, title: 苹果 }, ...]异步函数返回 Promise选项在接口返回后动态填充填充过程由 ngTableSelectFilterDs.directive.ts 指令完成它会自动在选项开头插入一个空值项方便用户清空筛选。完整示例可参考官方演示页 demo-select.html。4. Select 多选过滤器select-multiple模板文件select-multiple.html与单选版几乎一致只是渲染为select multiple用户可以同时勾选多个条件适合按部门多选这类场景。5. 嵌套属性过滤器nested property这是新手最容易忽略的亮点过滤字段名支持用点号路径指向对象的深层属性。例如数据形如{ name: Alice, address: { city: Shanghai } }只要列的过滤字段配置为address.cityng-table 就能直接对城市名做筛选。核心实现是 ngTableDefaultGetData.ts 中的setPath函数——它把address.city这样的路径拆分成嵌套结构再交给 Angular 的$filter服务完成匹配。演示页面见 demo-nested-property.html。6. 自定义模板过滤器custom template当内置控件都不满足需求时可以把列的filter配置为一个模板字符串或路径ng-table 会用它渲染任意自定义界面比如日期选择器、滑块、颜色选择器。原理在过滤行模板中体现得很直接每个过滤控件都通过ng-include加载对应的模板 URL见 filterRow.html。演示见 demo-custom-template.html 与 demo-multi-template.html同一列挂多个过滤控件。深入一层过滤是怎么执行的理解执行链路你才能在性能出问题时快速定位收集params.filter()拿到{ 字段名: 过滤值 }字典解析路径applyFilter把带点号的字段名转换成嵌套对象即嵌套属性支持的关键执行匹配默认调用 Angular 的filter过滤器服务按子串、不区分大小写匹配广播事件过滤完成后通过事件通道发出afterDataFiltered事件供你的业务代码监听这条链路集中在 ngTableDefaultGetData.ts 的applyFilter与setPath中。调优技巧让过滤更快更聪明以下参数都在 filterSettings.ts 中定义可通过params.settings().filterOptions修改参数作用适用场景filterDelay输入防抖时长默认 500ms远程接口过滤时可加大到 800msfilterComparator替换匹配规则布尔或比较函数需要完全相等而非子串匹配时filterFilterName换用其他 Angular$filter匹配规则整体替换filterFn完全接管过滤逻辑复杂业务、跨字段联合筛选需要自定义比较器时函数签名定义在 filterComparator.ts接收(实际值, 期望值)两个参数返回是否匹配。更多进阶演示含自定义算法 demo-customize-algorithm.html、过滤 API 编程 demo-api.html、基础启用 demo-enabling.html都集中在 demo-site/views/filtering/ 目录下建议对照阅读。小结一句话记忆ng-table 过滤 表头下方一行控件 默认子串匹配 500ms 防抖。想快速上手开启show-filter默认文本过滤即可满足大部分场景想精确筛选换number或select过滤器给下拉列配好data数据源想深挖数据用点号路径过滤嵌套属性想彻底定制自定义模板 filterFn组合拳几乎无所不能按照内置模板 → 数据源配置 → 匹配规则替换的顺序由浅入深你就能把 ng-table 的过滤功能用到极致。【免费下载链接】ng-tableSimple table with sorting and filtering on AngularJS项目地址: https://gitcode.com/gh_mirrors/ng/ng-table创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考