当前位置：首页 > news >正文

SAP学习笔记 - 开发24 - 前端Fiori开发 Filtering（过滤器），Sorting and Grouping（排序和分组）

news 来源：原创 2025/6/6 8:34:01

上一章讲了SAP Fiori开发的表达式绑定，自定义格式化等内容。

SAP学习笔记 - 开发23 - 前端Fiori开发 Expression Binding（表达式绑定），Custom Formatters（自定义格式化）-CSDN博客

本章继续讲SAP Fiori开发的内容。

1，Filtering（过滤器）

1），InvoiceList.view.xml

2），InvoiceList.controller.js

3），运行看结果

4），深入看一下onFilterInvoices 方法

a），方法功能概述

b），代码解析

1. 方法定义

2. 初始化过滤器数组

3. 获取用户输入

4. 构建过滤条件

5. 应用过滤器到列表

c），关键点说明

d），完整流程示例

e），关联知识扩展

5），多字段过滤器

2，Sorting and Grouping（排序和分组）

2-1，Sorting（排序）

1），InvoiceList.view.xml

2），运行看效果

2-2，Grouping（分组）

1），InvoiceList.view.xml

2），运行看效果

下面是详细内容。

1，Filtering（过滤器）

1），InvoiceList.view.xml

<mvc:ViewcontrollerName="ui5.walkthrough.controller.InvoiceList"xmlns="sap.m"xmlns:core="sap.ui.core"xmlns:mvc="sap.ui.core.mvc"><Listid="invoiceList"headerText="{i18n>invoiceListTitle}"class="sapUiResponsiveMargin"width="auto"items="{invoice>/Invoices}"><headerToolbar><Toolbar><Title text="{i18n>invoiceListTitle}"/><ToolbarSpacer/><SearchField width="50%" search=".onFilterInvoices"/></Toolbar></headerToolbar><items><ObjectListItemcore:require="{Currency: 'sap/ui/model/type/Currency'}"title="{invoice>Quantity} x {invoice>ProductName}"number="{parts: ['invoice>ExtendedPrice','view>/currency'],type: 'Currency',formatOptions: {showMeasure: false}}"numberUnit="{view>/currency}"numberState="{= ${invoice>ExtendedPrice} > 50 ? 'Error' : 'Success' }"><firstStatus><ObjectStatuscore:require="{Formatter: 'ui5/walkthrough/model/formatter'}"text="{path: 'invoice>Status',formatter: 'Formatter.statusText.bind($controller)'}"icon="sap-icon://accept"/></firstStatus></ObjectListItem></items></List>
</mvc:View>

- id="invoiceList"：这行代码的意思是给 List 控件加个ID

加ID 之后，在Controller端就可以找到它了，找到之后才能对它进行操作嘛

- <headerToolbar> 这里就是在列表顶部添加一个工具栏

- ToolbarSpacer：空白间隔（将搜索框推到右侧）

- SearchField：搜索框，width="50%"：占工具栏 50% 宽度

- search=".onFilterInvoices"：触发搜索时调用控制器的 onFilterInvoices 方法

<headerToolbar>
<Toolbar>
<Title text="{i18n>invoiceListTitle}"/>
<ToolbarSpacer/>
<SearchField
width="50%"
search=".onFilterInvoices"/>
</Toolbar>
</headerToolbar>

2），InvoiceList.controller.js

sap.ui.define(["sap/ui/core/mvc/Controller","sap/ui/model/json/JSONModel","sap/ui/model/Filter","sap/ui/model/FilterOperator"
], (Controller, JSONModel, Filter, FilterOperator) => {"use strict";return Controller.extend("ui5.walkthrough.controller.InvoiceList", { onInit() {const oViewModel = new JSONModel({currency: "EUR"});this.getView().setModel(oViewModel, "view");},onFilterInvoices(oEvent) {// build filter arrayconst aFilter = [];const sQuery = oEvent.getParameter("query");if (sQuery) {aFilter.push(new Filter("ProductName", FilterOperator.Contains, sQuery));}// filter bindingconst oList = this.byId("invoiceList");const oBinding = oList.getBinding("items");oBinding.filter(aFilter);}});
});

这里面就是加了这个过滤方法

- onFilterInvoices(oEvent) { =》oEvent 是输入框里面的传过来的参数

- const sQuery = oEvent.getParameter("query"); =》用 query 参数名取输入框里的值

- new Filter("ProductName", FilterOperator.Contains, sQuery) =》用ProductName字段进行过滤

- const oList = this.byId("invoiceList"); =》找到画面端的 invoiceList List列表

- const oBinding = oList.getBinding("items"); =》List列表中属性 “items" 的值

- oBinding.filter(aFilter); =》实行过滤操作

onFilterInvoices(oEvent) {
// build filter array
const aFilter = [];
const sQuery = oEvent.getParameter("query");
if (sQuery) {
aFilter.push(new Filter("ProductName", FilterOperator.Contains, sQuery));
}

// filter binding
const oList = this.byId("invoiceList");
const oBinding = oList.getBinding("items");
oBinding.filter(aFilter);
}

3），运行看结果

4），深入看一下onFilterInvoices 方法

以下内容自Deepseek查询整理之后而得。

a），方法功能概述

onFilterInvoices 的作用是根据用户在搜索框输入的文本，动态过滤 List 控件中显示的数据。当用户在搜索框输入内容并触发搜索时，该方法会：

获取用户输入的搜索关键词
创建一个过滤器（Filter）
将过滤器应用到列表的数据绑定（Binding）上，实现实时过滤效果

b），代码解析

1. 方法定义

javascript

onFilterInvoices(oEvent) {

oEvent：搜索框触发的事件对象，包含用户输入的参数（如搜索关键词）。

2. 初始化过滤器数组

javascript

const aFilter = [];

创建一个空数组 aFilter，用于存储过滤条件（支持多条件过滤）。

3. 获取用户输入

javascript

const sQuery = oEvent.getParameter("query");

从事件对象中提取用户输入的搜索关键词 query（即搜索框中的文本）。

4. 构建过滤条件

javascript

if (sQuery) {aFilter.push(new Filter("ProductName", FilterOperator.Contains, sQuery));
}

Filter：来自 sap/ui/model/Filter，表示一个数据过滤条件。
FilterOperator.Contains：来自 sap/ui/model/FilterOperator，表示“包含”关系（类似 SQL 的 LIKE）。
逻辑：如果用户输入了关键词（sQuery 非空），则创建一个过滤器，要求 ProductName 字段包含该关键词（不区分大小写）。

5. 应用过滤器到列表

javascript

const oList = this.byId("invoiceList");
const oBinding = oList.getBinding("items");
oBinding.filter(aFilter);

this.byId("invoiceList")：获取视图中 id="invoiceList" 的 List 控件。
getBinding("items")：获取列表控件中 items 属性的数据绑定（绑定到 {invoice>/Invoices} 的数据集）。
oBinding.filter(aFilter)：将过滤器数组应用到数据绑定上，触发列表的实时更新。

c），关键点说明

数据绑定与过滤机制
- 列表的 items 属性绑定了数据模型（invoice>/Invoices），oBinding.filter() 会在原始数据基础上动态过滤，无需重新加载数据。
- 过滤器支持多字段组合，例如可以同时过滤 ProductName 和 CustomerName：
  
  javascript
```
aFilter.push(new Filter({filters: [new Filter("ProductName", FilterOperator.Contains, sQuery),new Filter("ShipperName", FilterOperator.Contains, sQuery)],and: false // 表示“或”关系（任一字段匹配即可）
}));
```
空查询处理
- 当用户清空搜索框时，sQuery 为空，aFilter 数组保持为空，此时 oBinding.filter([]) 会清除所有过滤器，显示完整列表。
模型与控制器协作
- 视图（View）中的搜索框通过 search=".onFilterInvoices" 绑定到控制器方法。
- 控制器不直接操作数据，而是通过模型绑定的方式更新 UI，符合 MVC 模式。

d），完整流程示例

用户在搜索框输入 "Apple" 并按下搜索按钮。
触发 onFilterInvoices 方法：
- 创建过滤器：ProductName Contains "Apple"。
- 应用过滤器到列表绑定。
列表仅显示 ProductName 包含 "Apple" 的发票条目。

e），关联知识扩展

FilterOperator 的其他选项：
- StartsWith、EndsWith、EQ（等于）、BT（介于）等。
多条件过滤：
通过组合 Filter 的 and/or 逻辑实现复杂查询。
后端过滤：
如果数据量很大，可以通过 OData 服务的 $filter 参数将过滤逻辑推到后端执行。

这个方法体现了 SAP UI5 数据绑定的强大之处——通过声明式绑定和编程式过滤的结合，实现高效的前端数据交互。

5），多字段过滤器

按照上面4）里面的提示，弄一下多字段 [或/Or] 的过滤器试试看

a），InvoiceList.controller.js

sap.ui.define(["sap/ui/core/mvc/Controller","sap/ui/model/json/JSONModel","sap/ui/model/Filter","sap/ui/model/FilterOperator"
], (Controller, JSONModel, Filter, FilterOperator) => {"use strict";return Controller.extend("ui5.walkthrough.controller.InvoiceList", { onInit() {const oViewModel = new JSONModel({currency: "EUR"});this.getView().setModel(oViewModel, "view");},onFilterInvoices(oEvent) {// build filter arrayconst aFilter = [];const sQuery = oEvent.getParameter("query");if (sQuery) {aFilter.push(new Filter({filters: [new Filter("ProductName", FilterOperator.Contains, sQuery),new Filter("ShipperName", FilterOperator.Contains, sQuery)],and: false // 表示“或”关系（任一字段匹配即可）}));}// filter bindingconst oList = this.byId("invoiceList");const oBinding = oList.getBinding("items");oBinding.filter(aFilter);}});
});

b），InoiceList.view.xml

加上 intro 属性，绑定 intro="{invoice>ShipperName}"

<mvc:ViewcontrollerName="ui5.walkthrough.controller.InvoiceList"xmlns="sap.m"xmlns:core="sap.ui.core"xmlns:mvc="sap.ui.core.mvc"><Listid="invoiceList"headerText="{i18n>invoiceListTitle}"class="sapUiResponsiveMargin"width="auto"items="{path : 'invoice>/Invoices',sorter : {path : 'ShipperName',group : true}}"><headerToolbar><Toolbar><Title text="{i18n>invoiceListTitle}"/><ToolbarSpacer/><SearchField width="50%" search=".onFilterInvoices"/></Toolbar></headerToolbar><items><ObjectListItemcore:require="{Currency: 'sap/ui/model/type/Currency'}"title="{invoice>Quantity} x {invoice>ProductName}"intro="{invoice>ShipperName}"number="{parts: ['invoice>ExtendedPrice','view>/currency'],type: 'Currency',formatOptions: {showMeasure: false}}"numberUnit="{view>/currency}"numberState="{= ${invoice>ExtendedPrice} > 50 ? 'Error' : 'Success' }"><firstStatus><ObjectStatuscore:require="{Formatter: 'ui5/walkthrough/model/formatter'}"text="{path: 'invoice>Status',formatter: 'Formatter.statusText.bind($controller)'}"icon="sap-icon://accept"/></firstStatus></ObjectListItem></items></List>
</mvc:View>

c），运行看效果

用 M 检索，3 x Canned Beans 里面虽然没有 M，但是 ShipperName里面有啊，也检出来了

2，Sorting and Grouping（排序和分组）

SAPUI5 SDK - Demo Kit

2-1，Sorting（排序）

1），InvoiceList.view.xml

<mvc:ViewcontrollerName="ui5.walkthrough.controller.InvoiceList"xmlns="sap.m"xmlns:core="sap.ui.core"xmlns:mvc="sap.ui.core.mvc"><Listid="invoiceList"headerText="{i18n>invoiceListTitle}"class="sapUiResponsiveMargin"width="auto"items="{path : 'invoice>/Invoices',sorter : {path : 'ProductName' }}"><headerToolbar><Toolbar><Title text="{i18n>invoiceListTitle}"/><ToolbarSpacer/><SearchField width="50%" search=".onFilterInvoices"/></Toolbar></headerToolbar><items><ObjectListItemcore:require="{Currency: 'sap/ui/model/type/Currency'}"title="{invoice>Quantity} x {invoice>ProductName}"intro="{invoice>ShipperName}"number="{parts: ['invoice>ExtendedPrice','view>/currency'],type: 'Currency',formatOptions: {showMeasure: false}}"numberUnit="{view>/currency}"numberState="{= ${invoice>ExtendedPrice} > 50 ? 'Error' : 'Success' }"><firstStatus><ObjectStatuscore:require="{Formatter: 'ui5/walkthrough/model/formatter'}"text="{path: 'invoice>Status',formatter: 'Formatter.statusText.bind($controller)'}"icon="sap-icon://accept"/></firstStatus></ObjectListItem></items></List>
</mvc:View>

- 排序针对的就是 List组件的 items 属性，所以就在 items 里面加了个 sorter，然后用path指定排序

items="{
path : 'invoice>/Invoices',
sorter : {
path : 'ProductName'
}}">

2），运行看效果

现在就根据 ProductName 来进行排序了

2-2，Grouping（分组）

1），InvoiceList.view.xml

<mvc:ViewcontrollerName="ui5.walkthrough.controller.InvoiceList"xmlns="sap.m"xmlns:core="sap.ui.core"xmlns:mvc="sap.ui.core.mvc"><Listid="invoiceList"headerText="{i18n>invoiceListTitle}"class="sapUiResponsiveMargin"width="auto"items="{path : 'invoice>/Invoices',sorter : {path : 'ShipperName',group : true}}"><headerToolbar><Toolbar><Title text="{i18n>invoiceListTitle}"/><ToolbarSpacer/><SearchField width="50%" search=".onFilterInvoices"/></Toolbar></headerToolbar><items><ObjectListItemcore:require="{Currency: 'sap/ui/model/type/Currency'}"title="{invoice>Quantity} x {invoice>ProductName}"intro="{invoice>ShipperName}"number="{parts: ['invoice>ExtendedPrice','view>/currency'],type: 'Currency',formatOptions: {showMeasure: false}}"numberUnit="{view>/currency}"numberState="{= ${invoice>ExtendedPrice} > 50 ? 'Error' : 'Success' }"><firstStatus><ObjectStatuscore:require="{Formatter: 'ui5/walkthrough/model/formatter'}"text="{path: 'invoice>Status',formatter: 'Formatter.statusText.bind($controller)'}"icon="sap-icon://accept"/></firstStatus></ObjectListItem></items></List>
</mvc:View>

- 其实就是加了个 group 属性。

但是这里需要注意的是，既然你要根据某个字段进行分组，那么你首先得根据它进行排序嘛

sorter : {
path : 'ShipperName',
group : true
}