SAP UI5 表格行项目内的按钮点击之后,如何获得当前所在的表格行项目的数据

简介: SAP UI5 表格行项目内的按钮点击之后,如何获得当前所在的表格行项目的数据

我的 SAP UI5 教程这篇文章 下面,有个朋友留言咨询一个问题:

我想问一个问题就是,我在table表格里放了一个按钮,就是如何点击按钮能够获取到本行的数据呀,

本文专门解答。

首先我们得在 Table 行项目里构造一个按钮出来。

重用我教程里步骤 33:SAP UI5 应用开发教程之三十三 - SAP UI5 应用的响应式布局特性(Responsiveness) 的源代码。

做出如下修改:

  • InvoiceList.view.xmlColumns 区域里,新增一个 Column,随便显示一个文本,比如解绑:

  • items 元素的 ColumnListItem 元素下面,新增一个 Button 元素:

因为我这个例子,使用本地 SAP UI5 应用消费一个远端的 OData 服务,因此会遇到跨域错误(CORS error),为了临时避开这个问题,使用下面的命令行启动 Chrome,让 Chrome 忽略跨域错误:


chrome.exe --user-data-dir="C:/temp" --disable-web-security

接着按照我教程里介绍的方法,本地启动 SAP UI5 应用,打开如下 url,就能看到这个行项目里包含了按钮的列表了:

http://localhost:8080/webapp/index.html

打开文件夹 33 的 InvoiceList.controller.js,实现按钮的点击处理函数 onUnbind

如何在 onUnbind 函数里,根据传递进来的输入参数 oEvent,获取被点击的按钮所在的表格行项目的其他数据呢?

假设我们想获取表格行项目的 Title 数据,注意这一点, Title 列和解绑按钮,具有同样的父控件,那就是表格行项目本身。

因此,基本实现思路就是:

  1. 从 oEvent 输入参数,获得当前被点击按钮所在的表格行项目的实例
  2. 根据表格行项目,获取其子控件即 Title 字段
  1. 打印 Title 字段的值

因此,onUnbind 完整的实现代码如下:

onUnbind: function(oEvent){
            var oLineItem = oEvent.getSource().getParent();
            var oTitleField = oLineItem.getAggregation("cells")[1];
            alert(oTitleField.getProperty("title"));
        },

  • var oLineItem = oEvent.getSource().getParent():oEvent.getSource() 返回的是发生点击事件的控件,即解绑按钮本身。解绑按钮调用 getParent,返回其父控件,即被点击的解绑按钮所在的表格行项目。
  • var oTitleField = oLineItem.getAggregation(“cells”)[1];

这一行的含义是,行项目实例的聚合属性里一共包含了 6 个元素,分别对应表格的六个列。

我们可以在调试器里,观察到这个索引为 1 的聚合内容:

最后的效果,点击任意一个行项目的按钮,就能打印出该行项目 Name 字段的值(绑定到 title 属性)。

相关文章
|
4月前
|
前端开发
Element UI 【实战】纯前端对表格数据进行增删改查(内含弹窗表单、数据校验、时间日期格式)
Element UI 【实战】纯前端对表格数据进行增删改查(内含弹窗表单、数据校验、时间日期格式)
178 6
|
6月前
|
存储 安全 测试技术
使用 Visual Studio Code 创建 SAP UI5 项目遇到 self-signed security certificate 相关问题
使用 Visual Studio Code 创建 SAP UI5 项目遇到 self-signed security certificate 相关问题
|
3月前
|
前端开发 JavaScript UED
element-ui 表格数据究竟隐藏着怎样的神秘样式与格式化技巧?快来揭开谜底!
【8月更文挑战第22天】《element-ui 表格数据样式及格式化案例》展示了如何利用 element-ui 的表格组件实现美观且易读的数据展示。通过简单配置,可以自定义表格样式,如边框、背景色等,并通过 formatter 实现数据格式化,例如将成绩保留一位小数。此外,还能依据条件设置行样式,如成绩达优则高亮显示,从而增强用户体验和数据可读性。
63 1
|
3月前
|
API Android开发
Android项目架构设计问题之选择和使用合适的UI库如何解决
Android项目架构设计问题之选择和使用合适的UI库如何解决
43 0
|
3月前
|
开发者 Android开发 UED
打造流畅应用:深入探索如何在Xamarin项目中选择并实现最佳UI/UX设计的实践指南
【8月更文挑战第31天】在数字化时代,UI/UX设计成为应用成功的关键。Xamarin以高效开发和强大兼容性著称,其设计理念“一次编写,处处运行”需充分适应多平台特性,提供一致体验。选择Xamarin.Forms或结合Xamarin.Native可实现跨平台UI设计;遵循各平台设计指南,保持布局一致性和简洁性;通过用户测试不断优化。最终,结合技术和用户需求,打造美观实用的应用,脱颖而出。
48 0
|
4月前
Element UI【级联选择器】el-cascader 获取选中内容的 label 数据,鼠标悬浮显示超长内容
Element UI【级联选择器】el-cascader 获取选中内容的 label 数据,鼠标悬浮显示超长内容
601 3
|
4月前
Element UI 多选表格--判断勾选数据行的 Checkbox 时为选中还是取消选中
Element UI 多选表格--判断勾选数据行的 Checkbox 时为选中还是取消选中
43 1
|
4月前
|
前端开发 JavaScript
零基础学 Vue + Element UI 第01步 —— 搭建开发环境、创建项目、修改默认模板、启动项目、访问项目
零基础学 Vue + Element UI 第01步 —— 搭建开发环境、创建项目、修改默认模板、启动项目、访问项目
63 1
|
4月前
Element UI 多选表格【翻页多选】简易版(不支持翻页多选数据反显)
Element UI 多选表格【翻页多选】简易版(不支持翻页多选数据反显)
93 0
Element UI 多选表格【翻页多选】简易版(不支持翻页多选数据反显)
|
4月前
软件研发核心问题之在需求拆解过程中,“数据与UI如何关联”的问题如何解决
软件研发核心问题之在需求拆解过程中,“数据与UI如何关联”的问题如何解决