在我的这篇教程 SAP UI5 应用开发教程之六十四 - 基于 OData V4 的 SAP UI5 表格控件如何实现 filter(过滤) 和 sort(排序)功能 里,有朋友提出了一个疑问:
代码第 37 行里这个 FilterType.Application
的作用是什么?

这个 FilterType.Application 是枚举类型 FilterType
的一个字段,作为 filter 的输入参数之一。filter 方法定义在 ODataListBinding.prototype.filter
上。
从 ODataListBinding.js
文件里能找到这个方法的实现源代码。

里面的大段注释里,就提到了这个 FilterType 的含义:

也可以从官方文档里查看这个 FilterType 的定义:
每个列表绑定维护两个单独的过滤器列表,一个用于由拥有该绑定的控件内部定义的过滤器(维护在 ODataListBinding 实例的 aFilters
数组属性里),另一个用于应用程序可以另外定义的过滤器列表(维护在 ODataListBinding 属性的 aApplicationFilters
数组属性里)。 当执行过滤操作时,两组过滤器会被合并。

可以把 FilterType.Control 理解成由控件本身设置、维护并实现的过滤器,这些过滤逻辑对于外界消费的应用程序来说是一个黑盒子。某些控件将过滤器功能作为其行为的一部分,例如 Table Columns
或 Facet filters
过滤器。 当此类控件为某绑定路径定义过滤器时,它们应使用 FilterType.Control
将其过滤器与应用程序可能另外定义的过滤器分开。

查看 ODataListBinding
的实现源代码,如果过滤器类型为 FilterType.Control,就把 filter 方法传入的过滤器明细放置到 1768 行的 this.aFilters 数组属性里;
否则类型就是 FilterType.Application, 此时过滤器定义放置到 this.aApplicationFilters
里。


我们在 search 字段输入 Hu
,对 People 模型的 LastName 字段进行过滤:

最后这两种类型的 filter,会在 ODataListBinding.prototype.filter 方法的调用栈内部,通过 combineFilters
做一个合并操作:

网友评论