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

42次阅读

共计 1265 个字符，预计需要花费 4 分钟才能阅读完成。

我的 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 属性)。

正文完