如何从 SAP Fiori Elements List Report Table 点击事件响应函数里拿到表格某一行的信息

简介: 如下图所示,我按照这篇文章 如何在 SAP Fiori Elements List Report 表格工具栏里增添新的自定义按钮 里介绍的方式,在 SAP Fiori Elements List Report 应用的 table 工具栏里,添加了一个自定义按钮:

订阅专栏

如下图所示,我按照这篇文章 如何在 SAP Fiori Elements List Report 表格工具栏里增添新的自定义按钮 里介绍的方式,在 SAP Fiori Elements List Report 应用的 table 工具栏里,添加了一个自定义按钮:


image.png


下一步,我期望选中某行表项后,点击该按钮,能弹出对应表项的一些数据。


所以问题的焦点,就是如何从按钮的点击处理函数 onCustomAction1 的输入参数 oEvent 里,获得当前表格里被选中的数据。


image.png


我们从 oEvent 变量触发:


image.png


oEvent.oSource 指向当前触发事件的 UI 控件,即 自定义按钮控件:


image.png


按钮的 parent 是 toolbar:

image.png


Toolbar 的 parent 就是整个响应式 table 了:


image.png


调用 getSelectedItem() 拿到当前选中行:


image.png


这个 ColumnListItem 包含了当前选中行的所有列。


调用其 getCells 方法,得到 8 个 Table Columns 的实例:


image.png


image.png


image.png


从其 sId 大致能辨识出每个 Column 代表的含义,或者直接根据其 index 也就是索引,也能判断出。比如第一个元素,是 product image column,而第二个元素 vbox,是一个复合控件,Vertical Box. 第三个元素,是一个 Text 控件,Product Category.


取得 Product Category 的代码比较简单:


image.png


先使用 getItems 拿到 vertical box 包含的所有数据:

image.png



然后再逐一访问每条数据实例,调用 getText 即可获得逐条数据内容。

image.png


image.png

相关文章
|
1月前
SAP UI5 Link 控件的使用方法介绍 - 后续学习 Fiori Elements Smart Link 的基础试读版
SAP UI5 Link 控件的使用方法介绍 - 后续学习 Fiori Elements Smart Link 的基础试读版
15 0
|
2月前
|
XML 存储 JavaScript
关于 SAP Fiori Elements List Report 里的 TableCell.fragment.xml 头部声明
关于 SAP Fiori Elements List Report 里的 TableCell.fragment.xml 头部声明
22 0
|
2月前
SAP Fiori Elements 应用里图片字段(Image)的显示原理介绍试读版
SAP Fiori Elements 应用里图片字段(Image)的显示原理介绍试读版
17 0
|
3月前
|
API
SAP Fiori Elements 针对 OData V2 和 V4 的 Extension API
SAP Fiori Elements 针对 OData V2 和 V4 的 Extension API
26 0
|
3月前
|
设计模式 前端开发 JavaScript
关于 SAP Fiori Elements List Report Go 按钮的实现
关于 SAP Fiori Elements List Report Go 按钮的实现
21 0
|
1月前
|
前端开发 搜索推荐 开发者
SAP UI5 sap.m.Column 控件的 minScreenWidth 属性介绍
SAP UI5 sap.m.Column 控件的 minScreenWidth 属性介绍
27 0
|
1月前
|
JavaScript 前端开发 开发者
SAP UI5 控件 sap.m.ListBase 的 inset 属性的作用介绍
SAP UI5 控件 sap.m.ListBase 的 inset 属性的作用介绍
13 0
|
1月前
|
Web App开发 数据采集 前端开发
纯技术讨论:如何让 SAP UI5 应用无法被别人在浏览器里调试 - 这种做法不推荐试读版
纯技术讨论:如何让 SAP UI5 应用无法被别人在浏览器里调试 - 这种做法不推荐试读版
15 0
|
1月前
|
XML 存储 数据格式
SAP UI5 控件 customData 属性的应用介绍
SAP UI5 控件 customData 属性的应用介绍
31 0
|
1月前
|
前端开发 JavaScript API
SAP UI5 sap.ui.require.toUrl 的作用介绍
SAP UI5 sap.ui.require.toUrl 的作用介绍
28 0