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

东京老树根2025-06-06 13:17

上一章讲了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 方法](#4）， 深入看一下onFilterInvoices 方法)

a），方法功能概述

b），代码解析

[1. 方法定义](#1. 方法定义)

[2. 初始化过滤器数组](#2. 初始化过滤器数组)

[3. 获取用户输入](#3. 获取用户输入)

[4. 构建过滤条件](#4. 构建过滤条件)

[5. 应用过滤器到列表](#5. 应用过滤器到列表)

c），关键点说明

d），完整流程示例

e），关联知识扩展

5），多字段过滤器

[2，Sorting and Grouping（排序和分组）](#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: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 控件中显示的数据。当用户在搜索框输入内容并触发搜索时，该方法会：

  1. 获取用户输入的搜索关键词

  2. 创建一个过滤器（Filter）

  3. 将过滤器应用到列表的数据绑定（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），关键点说明

  1. 数据绑定与过滤机制

    • 列表的 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 // 表示"或"关系（任一字段匹配即可）
}));

  2. 空查询处理

    • 当用户清空搜索框时，sQuery 为空，aFilter 数组保持为空，此时 oBinding.filter([]) 会清除所有过滤器，显示完整列表。

  3. 模型与控制器协作

    • 视图（View）中的搜索框通过 search=".onFilterInvoices" 绑定到控制器方法。

    • 控制器不直接操作数据，而是通过模型绑定的方式更新 UI，符合 MVC 模式。

d），完整流程示例

  1. 用户在搜索框输入 "Apple" 并按下搜索按钮。

  2. 触发 onFilterInvoices 方法：

    • 创建过滤器：ProductName Contains "Apple"。

    • 应用过滤器到列表绑定。

  3. 列表仅显示 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（排序和分组）

SAPUI5 SDK - Demo Kit

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顾问业务知识请点击下面目录链接或东京老树根的博客主页

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

东京老树根-CSDN博客

相关推荐
IMPYLH3 小时前
Python 的内置函数 reversed
笔记·python
码荼5 小时前
学习开发之hashmap
java·python·学习·哈希算法·个人开发·小白学开发·不花钱不花时间crud
武昌库里写JAVA6 小时前
Oracle如何使用序列 Oracle序列使用教程
java·开发语言·spring boot·学习·课程设计
ysa0510307 小时前
数论基础知识和模板
数据结构·c++·笔记·算法
祁思妙想7 小时前
八股学习（三）---MySQL
数据库·学习·mysql
今天背单词了吗9807 小时前
算法学习笔记：7.Dijkstra 算法——从原理到实战，涵盖 LeetCode 与考研 408 例题
java·开发语言·数据结构·笔记·算法
mitt_8 小时前
《人生顶层设计》读书笔记7
笔记
智者知已应修善业8 小时前
【51单片机节日彩灯控制器设计】2022-6-11
c语言·经验分享·笔记·单片机·嵌入式硬件·51单片机
amazinging8 小时前
北京-4年功能测试2年空窗-报培训班学测开-第四十一天
python·学习·appium
Jyywww1218 小时前
微信小程序学习笔记
笔记·学习·微信小程序
热门推荐
012024年 最新 iPhone手机 历代机型、屏幕尺寸、纵横比、分辨率 整理02Coze实战第13讲：飞书多维表格读取+豆包生图模型，轻松批量生成短剧封面03Coze扣子平台完整体验和实践（附国内和国际版对比）04华为昇腾 910B 部署 DeepSeek-R1 蒸馏系列模型详细指南05手机电脑之间快速传输图片视频文件，不压缩画质、不限制大小的方法！06扣子（coze）实战|我用扣子搭建了一个自动分析小红薯笔记内容的AI应用|详细步骤拆解07Coze平台 创建AI智能体的详细步骤指南08免费可用！最强AI数字人对口型神器：让照片开口说话唱歌，支持多人对口型+全身动作，1分钟学会！（附保姆级教程）09DeepSeek各版本说明与优缺点分析10MIUI显示/隐藏5G开关的方法，信号弱时开启手机Wifi通话方法