我的 SAP UI5 教程这篇文章 上面,有个敌人留言征询一个问题:
我想问一个问题就是,我在 table 表格里放了一个按钮,就是如何点击按钮可能获取到本行的数据呀,
本文专门解答。
首先咱们得在 Table 行我的项目里结构一个按钮进去。
重用我教程里步骤 33:SAP UI5 利用开发教程之三十三 – SAP UI5 利用的响应式布局个性(Responsiveness) 的源代码。
做出如下批改:
- 在
InvoiceList.view.xml
的Columns
区域里,新增一个 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/…
关上文件夹 33 的 InvoiceList.controller.js
,实现按钮的点击处理函数 onUnbind
:
如何在 onUnbind
函数里,依据传递进来的输出参数 oEvent
,获取被点击的按钮所在的表格行我的项目的其余数据呢?
假如咱们想获取表格行我的项目的 Title 数据,留神这一点,Title 列和解绑按钮,具备同样的父控件,那就是表格行我的项目自身。
因而,根本实现思路就是:
- 从 oEvent 输出参数,取得以后被点击按钮所在的表格行我的项目的实例
- 依据表格行我的项目,获取其子控件即 Title 字段
- 打印 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
属性)。