SAP UI5 应用开发教程之八十九 - 如何给 SAP UI5 列表控件增添多个图形界面的过滤器试读版

简介: SAP UI5 应用开发教程之八十九 - 如何给 SAP UI5 列表控件增添多个图形界面的过滤器试读版

本教程前面的步骤,我们已经介绍了列表控件过滤器(搜索框)的开发步骤:

以及 SAP UI5 应用开发教程之六十四 - 基于 OData V4 的 SAP UI5 表格控件如何实现 filter(过滤) 和 sort(排序)功能

如上两张图片所示,这种过滤器的外观都是一个搜索框,用户在搜索框里输入关键字,敲击回车后,列表内容将会只显示匹配这些关键字的行项目。


本文再介绍另一种类型的过滤器实现,即用户通过点击页面 UI 元素的操作,触发列表的过滤操作。


先看一下实现的效果。


列表控件下方显示了全部 14 个产品,在列表上方,有三个图形化显示的过滤器,分别代表库存充足,库存紧张和库存为 0 的产品。这三个图形化过滤器的右上角,还分别显示了每种类型的产品数量,分别是 10,3 和 1.

点击每种过滤器,会分别显示该过滤器施加之后对应的产品明细。如下图所示:

下面是具体的实现步骤。

相关文章
|
23天前
|
API
在阿里云RPA中,你可以使用"SetForegroundWindow"函数来将SAP控件置顶
【2月更文挑战第28天】 在阿里云RPA中,你可以使用"SetForegroundWindow"函数来将SAP控件置顶
36 1
|
23天前
|
前端开发 搜索推荐 开发者
SAP UI5 sap.m.Column 控件的 minScreenWidth 属性介绍
SAP UI5 sap.m.Column 控件的 minScreenWidth 属性介绍
36 0
|
23天前
|
JavaScript 前端开发 开发者
SAP UI5 控件 sap.m.ListBase 的 inset 属性的作用介绍
SAP UI5 控件 sap.m.ListBase 的 inset 属性的作用介绍
22 0
|
23天前
|
开发者 UED
关于 SAP UI5 sap.m.Column 的 demandPopin 属性
关于 SAP UI5 sap.m.Column 的 demandPopin 属性
25 0
|
23天前
SAP UI5 Link 控件的使用方法介绍 - 后续学习 Fiori Elements Smart Link 的基础试读版
SAP UI5 Link 控件的使用方法介绍 - 后续学习 Fiori Elements Smart Link 的基础试读版
19 0
|
23天前
|
Web App开发 数据采集 前端开发
纯技术讨论:如何让 SAP UI5 应用无法被别人在浏览器里调试 - 这种做法不推荐试读版
纯技术讨论:如何让 SAP UI5 应用无法被别人在浏览器里调试 - 这种做法不推荐试读版
31 0
|
23天前
|
XML 存储 数据格式
SAP UI5 控件 customData 属性的应用介绍
SAP UI5 控件 customData 属性的应用介绍
41 0
|
23天前
|
前端开发 JavaScript API
SAP UI5 sap.ui.require.toUrl 的作用介绍
SAP UI5 sap.ui.require.toUrl 的作用介绍
46 0
|
23天前
|
搜索推荐
如何让 SAP UI5 Smart Table 支持多项选择(Multiple-Selection)试读版
如何让 SAP UI5 Smart Table 支持多项选择(Multiple-Selection)试读版
25 0
|
23天前
使用 SAP UI5 Event Bus 机制,修复 SAP UI5 分页显示数据的一个 bug 试读版
使用 SAP UI5 Event Bus 机制,修复 SAP UI5 分页显示数据的一个 bug 试读版
28 0