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

    invoiceListTitle}"        class="sapUiResponsiveMargin"        width="auto"        items="{invoice>/Invoices}">                             invoiceListTitle}"/>                                                             Quantity} x {invoice>ProductName}"                number="{                    parts: [                        'invoice>ExtendedPrice',                        'view>/currency'                    ],                    type: 'Currency',                    formatOptions: {                        showMeasure: false                    }                }"                numberUnit="{view>/currency}"                numberState="{= ${invoice>ExtendedPrice} > 50 ? 'Error' : 'Success' }">                                    Status',                            formatter: 'Formatter.statusText.bind($controller)'                        }"                        icon="sap-icon://accept"                        />

- 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}"

    invoiceListTitle}"        class="sapUiResponsiveMargin"        width="auto"        items="{         path : 'invoice>/Invoices',         sorter : {            path : 'ShipperName',            group : true        }}">                             invoiceListTitle}"/>                                                             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' }">                                    Status',                            formatter: 'Formatter.statusText.bind($controller)'                        }"                        icon="sap-icon://accept"                        />

c），运行看效果

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

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

SAPUI5 SDK - Demo Kit

2-1，Sorting（排序）

1），InvoiceList.view.xml

    invoiceListTitle}"        class="sapUiResponsiveMargin"        width="auto"        items="{         path : 'invoice>/Invoices',         sorter : {            path : 'ProductName'          }}">                             invoiceListTitle}"/>                                                             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' }">                                    Status',                            formatter: 'Formatter.statusText.bind($controller)'                        }"                        icon="sap-icon://accept"                        />

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

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

2），运行看效果

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

2-2，Grouping（分组）

1），InvoiceList.view.xml

    invoiceListTitle}"        class="sapUiResponsiveMargin"        width="auto"        items="{         path : 'invoice>/Invoices',         sorter : {            path : 'ShipperName',            group : true        }}">                             invoiceListTitle}"/>                                                             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' }">                                    Status',                            formatter: 'Formatter.statusText.bind($controller)'                        }"                        icon="sap-icon://accept"                        />

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

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

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

2），运行看效果

叠加Filter 也是没有问题的

以上就是本篇的全部内容。

更多SAP顾问业务知识请点击下面目录链接或东京老树根的博客主页

https://blog.csdn.net/shi_ly/category_12216766.html

东京老树根-CSDN博客

posted @ 2025-07-18 17:17 yjbjingcha 阅读(11) 评论(0) 收藏举报

刷新页面返回顶部

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

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），运行看效果

公告

4），深入看一下onFilterInvoices 方法