我的 SAP UI5 教程這篇[文章](https://blog.csdn.net/i042416/article/details/120642096) 下面，有個朋友留言諮詢一個問題：

> 我想問一個問題就是，我在table表格裡放了一個按鈕，就是如何點選按鈕能夠獲取到本行的資料呀，

![](https://img-blog.csdnimg.cn/img_convert/26f6e0788803657f6e5802ad67ce7e29.png)

本文專門解答。

首先我們得在 Table 行專案裡構造一個按鈕出來。

重用我教程裡步驟 33：[SAP UI5 應用開發教程之三十三 - SAP UI5 應用的響應式佈局特性(Responsiveness)](https://jerry.blog.csdn.net/article/details/122792549) 的原始碼。

做出如下修改：

- 在 `InvoiceList.view.xml` 的 `Columns` 區域裡，新增一個 Column，隨便顯示一個文字，比如`解綁`:

![](https://img-blog.csdnimg.cn/img_convert/59ccfd105b5e181df761f045ff3d47e6.png)

- 在 `items` 元素的 `ColumnListItem` 元素下面，新增一個 Button 元素：

![](https://img-blog.csdnimg.cn/img_convert/1c1e1d2f1e1fd82170442e074d5bcc6c.png)

因為我這個例子，使用本地 SAP UI5 應用消費一個遠端的 OData 服務，因此會遇到跨域錯誤(CORS error)，為了臨時避開這個問題，使用下面的命令列啟動 Chrome，讓 Chrome 忽略跨域錯誤：

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

![](https://img-blog.csdnimg.cn/img_convert/e5834fa2daa688c1c5cd4560671e110e.png)

接著按照我[教程](https://jerry.blog.csdn.net/article/details/120618353)裡介紹的方法，本地啟動 SAP UI5 應用，開啟如下 url，就能看到這個行專案裡包含了按鈕的列表了：

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

![](https://img-blog.csdnimg.cn/img_convert/5be5a496b5826a2724bc4e5360de3dbe.png)

開啟資料夾 33 的 `InvoiceList.controller.js`，實現按鈕的點選處理函式 `onUnbind`：

![](https://img-blog.csdnimg.cn/img_convert/263ab945def4ce98dc8c11938cf3f82b.png)

如何在 `onUnbind` 函式里，根據傳遞進來的輸入引數 `oEvent`，獲取被點選的按鈕所在的表格行專案的其他資料呢？

假設我們想獲取表格行專案的 Title 資料，注意這一點， Title 列和解綁按鈕，具有同樣的父控制元件，那就是表格行專案本身。

![](https://img-blog.csdnimg.cn/img_convert/665b310f9f009cdd6e13186edc29c176.png)

因此，基本實現思路就是：

1. 從 oEvent 輸入引數，獲得當前被點選按鈕所在的表格行專案的例項
2. 根據表格行專案，獲取其子控制元件即 Title 欄位
3. 列印 Title 欄位的值

因此，onUnbind 完整的實現程式碼如下:

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

![](https://img-blog.csdnimg.cn/img_convert/18fd0d4b45bb137db364123bb20a4563.png)

- var oLineItem = oEvent.getSource().getParent()：oEvent.getSource() 返回的是發生點選事件的控制元件，即解綁按鈕本身。解綁按鈕呼叫 getParent，返回其父控制元件，即被點選的解綁按鈕所在的表格行專案。

- var oTitleField = oLineItem.getAggregation("cells")[1];

這一行的含義是，行專案例項的聚合屬性裡一共包含了 6 個元素，分別對應表格的六個列。

我們可以在偵錯程式裡，觀察到這個索引為 1 的聚合內容：

![](https://img-blog.csdnimg.cn/img_convert/58299b51e2cd46d602c3f8fb638faf81.png)

最後的效果，點選任意一個行專案的按鈕，就能列印出該行專案 Name 欄位的值(繫結到 `title` 屬性)。

![](https://img-blog.csdnimg.cn/img_convert/43be2300f73248bc58452ba466e78e7a.png)

SAP UI5 表格行專案內的按鈕點選之後，如何獲得當前所在的表格行專案的資料

相關文章