上一章讲了SAP Fiori开发的表达式绑定，自定义格式化等内容。
SAP学习笔记 - 开发23 - 前端Fiori开发 Expression Binding（表达式绑定），Custom Formatters（自定义格式化）-CSDN博客
本章继续讲SAP Fiori开发的内容。
目录
下面是详细内容。
1，Filtering（过滤器）
1），InvoiceList.view.xml
<mvc:View
controllerName="ui5.walkthrough.controller.InvoiceList"
xmlns="sap.m"
xmlns:core="sap.ui.core"
xmlns:mvc="sap.ui.core.mvc">
<List
id="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>
<ObjectListItem
core: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>
<ObjectStatus
core: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 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);
}
});
});这里面就是加了这个过滤方法
- 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 array
const 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 binding
const oList = this.byId("invoiceList");
const oBinding = oList.getBinding("items");
oBinding.filter(aFilter);
}
});
});
b），InoiceList.view.xml
加上 intro 属性，绑定 intro="{invoice>ShipperName}"
<mvc:View
controllerName="ui5.walkthrough.controller.InvoiceList"
xmlns="sap.m"
xmlns:core="sap.ui.core"
xmlns:mvc="sap.ui.core.mvc">
<List
id="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>
<ObjectListItem
core: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>
<ObjectStatus
core: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（排序和分组）
2-1，Sorting（排序）
1），InvoiceList.view.xml
<mvc:View
controllerName="ui5.walkthrough.controller.InvoiceList"
xmlns="sap.m"
xmlns:core="sap.ui.core"
xmlns:mvc="sap.ui.core.mvc">
<List
id="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>
<ObjectListItem
core: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>
<ObjectStatus
core: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:View
controllerName="ui5.walkthrough.controller.InvoiceList"
xmlns="sap.m"
xmlns:core="sap.ui.core"
xmlns:mvc="sap.ui.core.mvc">
<List
id="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>
<ObjectListItem
core: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>
<ObjectStatus
core: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
}
2），运行看效果
叠加Filter 也是没有问题的
以上就是本篇的全部内容。
更多SAP顾问业务知识请点击下面目录链接或东京老树根的博客主页