這是 Jerry 2021 年的第 62 篇文章，也是汪子熙公眾號總共第 339 篇原創文章。

龜雖壽
                                     曹操

神龜雖壽，猶有竟時；

騰蛇乘霧，終為土灰。

老驥伏櫪，志在千里；

烈士暮年，壯心不已。

盈縮之期，不但在天；
                                 
                                 養怡之福，可得永年。

幸甚至哉，歌以詠志。

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

最近收到一位朋友的諮詢，在專案實現中需要實現 SAP UI5 表格控制元件內的行專案刪除需求。這位朋友在網路上搜尋了一些示例程式碼，複製到自己的 SAP UI5 應用中，執行發現報錯。

首先我們要明確一點，SAP UI5 表格控制元件，同時支援 OData 模型 和 JSON 模型。因此，在面向 StackOverflow 或者 Google 程式設計時(這也是 Jerry 鍾愛的開發方式之一)，務必先弄清楚，從網上覆制貼上的程式碼片段，使用的模型型別是否和自己專案中用到的一致。

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

首先了解這兩個模型的區別。

SAP UI5 官網對 JSON 模型的定義：

> The JSON model is a client-side model and, therefore, intended for small data sets, which are completely available on the client. The JSON model does not support mechanisms for server-based paging or loading of deltas. It supports, however, two-way binding. Also, client-side models like the JSON model have no built-in support for sending data back to the server. The apps have to use, for example, model.getData() and jQuery.ajax() to send updated data to the server.

JSON 模型是客戶端模型，因此適用於在客戶端完全可用的小規模資料集。JSON 模型不支援基於伺服器實現的分頁或增量載入機制。同 OData 模型不同，JSON 模型沒有原生支援的將資料傳送回伺服器的功能。應用開發人員必須手動呼叫 model.getData()和 jQuery.ajax() 將客戶端更新的資料傳送回伺服器。

SAP UI5 官網對 OData 模型的定義：

> The OData model is a server-side model, meaning that the data set is only available on the server and the client only knows the currently visible (requested) data. Operations, such as sorting and filtering, are done on the server. The client sends a request to the server and shows the returned data.

OData 模型是伺服器端模型，這意味著完整的資料集僅儲存在伺服器上，客戶端只能感知到當前請求的資料。排序和過濾等操作都是在伺服器上完成的。客戶端向伺服器傳送請求並顯示返回的資料。

關於 OData 模型伺服器端工作模式的更多介紹，請參考 Jerry 之前的文章：**[SAP UI5 OData謠言粉碎機：極短時間內傳送兩個Odata request,前一個會自動被cancel掉嗎？](http://mp.weixin.qq.com/s?__biz=MzI3MDE4MjM5Mg==&mid=2247491291&idx=1&sn=237b0f4a83ffa8e047c7510d64a20dd6&chksm=ead5ac4cdda2255ae10700efd736c8f21d11bbf328149034a0d3df848667db2c6b13cf316fed&scene=21#wechat_redirect)**

OData 模型支援增量載入機制(或稱 Lazy Loading，延遲載入，懶載入)。關於這種機制的工作原理，請參考 Jerry 之前的文章：[**SAP UI 搜尋分頁技術**](http://mp.weixin.qq.com/s?__biz=MzI3MDE4MjM5Mg==&mid=2247484840&idx=1&sn=3e6d5397faa6f69579992337e7125bac&chksm=ead5b73fdda23e29a594a833d6c68d1fc26ac8077c54997b4d2b666fd1815e1d05c227ca3fa7&scene=21#wechat_redirect)。

Jerry 把 JSON 模型的客戶端特性，和 OData 模型的伺服器端特性，類比成網頁的客戶端渲染和伺服器端渲染。更多細節，請查詢這篇文章：[**SAP UI渲染模式：客戶端渲染 VS 伺服器端渲染**](http://mp.weixin.qq.com/s?__biz=MzI3MDE4MjM5Mg==&mid=2247491417&idx=1&sn=db841236e406d2bb3aeb9677596927e9&chksm=ead5adcedda224d8e4d0161bfda0e3da0d0cbf6d87cee20978767cbe6fdbb6e56caf177e18a8&scene=21#wechat_redirect)。

關於 JSON 模型和 OData 模型的資料繫結實現原理介紹，請參考 Jerry 之前的文章：

*   [深入學習SAP UI5框架程式碼系列之六：SAP UI5控制元件資料繫結的實現原理](http://mp.weixin.qq.com/s?__biz=MzI3MDE4MjM5Mg==&mid=2247491196&idx=1&sn=d5516ab572a9a292f40014361ddc1453&chksm=ead5acebdda225fd6cc100f2a5f9281d30aaeb238aa3801473c20614f093fb074c9c179337d5&scene=21#wechat_redirect)

*   [深入學習SAP UI5框架程式碼系列之七：控制元件資料繫結的三種模式 - One Way, Two Way和OneTime實現原理比較](http://mp.weixin.qq.com/s?__biz=MzI3MDE4MjM5Mg==&mid=2247491221&idx=1&sn=abaecc29eec83383f38ef5d79e98fa79&chksm=ead5ac02dda22514745c0762ecbed0b56116d9c80595cb1f4bc5fb863629da60cd71edefdd54&scene=21#wechat_redirect)

首先來學習在基於 OData 模型的 SAP UI5 表格控制元件裡如何實現行專案的增添和刪除需求。

這個例子的全部原始碼，在我的 Github 上：

https://github.com/wangzixi-diablo/ui5-toolset/tree/main/tabledelete/webapp

將整個程式碼倉庫克隆到本地，執行命令列 npm install, 然後執行 node local.js:

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

然後瀏覽器訪問 http://localhost:3002/tabledelete/ 即可：

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

上圖的表格控制元件，繫結到了 OData 服務 Products entitySet 包含的兩個欄位：Name 和 Size.

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

在 Table 控制器的 onInit 方法裡，我使用 ODataModel 的構造器，建立了一個 OData 模型例項，將其透過 setModel 方法賦給表格例項 oTable. 模型構造器需要傳入一個 OData 服務的路徑，這裡我傳入的路徑 /here/goes/your/serviceUrl, 指向的是我本地 MockServer 提供的虛擬 OData 服務。關於 SAP UI5 MockServer 如何使用，Jerry 後續的文章會介紹。

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

表格控制元件行專案的新增和刪除，直接呼叫 OData 服務對應的 create 和 remove 方法即可，如下圖高亮程式碼行所示。

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

OData 模型的 create 和 remove 方法呼叫後，會傳送對應的 HTTP 請求到對應的伺服器。注意，在新增和刪除行專案的事件處理程式碼裡，我們並未手動編寫表格控制元件的重新整理操作，因為 OData 模型是一個伺服器端模型，當我們呼叫 OData 模型的 create 和 remove 方法執行完畢之後，OData 模型會自動發起另一個 read 請求，從伺服器端獲取最新的資料，並自動重新整理表格控制元件。

關於 SAP UI5 基於 OData 模型的 Table 控制元件，在顯示和資料發生變化時傳送的 OData 請求，請參考 Jerry 製作的這個影片：

https://www.zhihu.com/zvideo/1422497221057613824

下面再實現基於 JSON 模型的表格控制元件行專案的新增和刪除。

本例的原始碼：

https://github.com/wangzixi-diablo/ui5-toolset/tree/main/jsontabledelete/webapp

新建 JSON 模型例項，並繫結到表格控制元件例項的程式碼如下圖所示。其中 this.data.Products 陣列變數，維護的是該 JSON 模型硬編碼的全部本地資料：

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

使用者在介面點選按鈕試圖新增和刪除行專案，我們需要做的操作是修改 JSON 模型繫結的 Products 陣列，然後呼叫 JSON 模型的 refresh 方法，手動觸發 UI 的重新整理。重新整理模型資料之後，透過 JSON 模型的雙向繫結機制，就能自動實現 UI 介面的同步重新整理。
![](https://img-blog.csdnimg.cn/img_convert/9dc0cf228123cc84ff3caf5205eb9251.png)

從以上 JSON 模型的實現可以看出，該表格顯示的全部資料，均位於客戶端維護的 this.data.Products 陣列裡。正如 SAP UI5 官網所言，JSON 模型只適合資料量較小的表格內容展示。如果表格的資料來源來自 SAP 系統後臺，採用 JSON 模型實現的表格應用，將會遇到可擴充套件性(scalability) 問題。在這種情形下，OData 模型是更好的選擇。

感謝閱讀。

**Jerry 的 SAP UI5 專題**

*   [在沒有任何前端開發經驗的基礎上, 建立第一個 SAP Fiori Elements 應用](http://mp.weixin.qq.com/s?__biz=MzI3MDE4MjM5Mg==&mid=2247492035&idx=1&sn=8373625310d71b4c8cc73612756a8168&chksm=ead65354dda1da4239a6442c577efee19b826d92b7372d4a551cd7af1957bd82fc002e34c2fe&scene=21#wechat_redirect)

*   [答網友提問：使用 SAP Fiori Tools 建立的 Fiori Elements 應用，如何進行二次開發？](http://mp.weixin.qq.com/s?__biz=MzI3MDE4MjM5Mg==&mid=2247492113&idx=1&sn=5d004d151e59ac262a15fdf79869934c&chksm=ead65086dda1d99092e784b7937cc23a6641f7692e0048d31412c427e8042fa071a9fe8f4691&scene=21#wechat_redirect)

*   [本地開發好的 SAP Fiori Elements 應用，如何部署到 ABAP 伺服器上](http://mp.weixin.qq.com/s?__biz=MzI3MDE4MjM5Mg==&mid=2247492152&idx=1&sn=b4f365a645779e1c57064b747d64ea61&chksm=ead650afdda1d9b9761fef55001935a8bd12aeda621a78edeafa7ee4cc154121bf76d7ab42c1&scene=21#wechat_redirect)

*   [深入掌握 SAP Fiori Elements 工作原理的前提條件：理解 Smart Field](http://mp.weixin.qq.com/s?__biz=MzI3MDE4MjM5Mg==&mid=2247492283&idx=1&sn=716ba26a34b3cb071ba58c74945ad9da&chksm=ead6502cdda1d93a7c4b2efc5144ed77dfd619edd045e3ca7dcdd0e74221b605ad54b06fe4b6&scene=21#wechat_redirect)

*   [深入理解 SAP Fiori Elements 工作原理系列之二：如何給 SAP Fiori Elements 應用新增自定義按鈕](http://mp.weixin.qq.com/s?__biz=MzI3MDE4MjM5Mg==&mid=2247492320&idx=1&sn=8e294788e4002f1a1d2efd00d075eee0&chksm=ead65077dda1d961f69684f665d4ad0be1b442a2e316b633a05834c75d50f3198e7a6efdb781&scene=21#wechat_redirect)

*   [SAP Fiori Elements 框架裡 Smart Table 控制元件的工作原理介紹](http://mp.weixin.qq.com/s?__biz=MzI3MDE4MjM5Mg==&mid=2247492348&idx=1&sn=f134e5418350197afcae1d4836de9be0&chksm=ead6506bdda1d97d5401bb675857409d4ea09897b86fdaa639fc72fd74116c4e7a2bbd1d7d0d&scene=21#wechat_redirect)

*   [SAP Fiori Elements List Report Smart Table 列專案寬度計算的奧妙](http://mp.weixin.qq.com/s?__biz=MzI3MDE4MjM5Mg==&mid=2247492410&idx=1&sn=fb80aeae21e11046848a6d67951374ce&chksm=ead651addda1d8bbdd08ee6c24c60116b45511c752b0b09b2cf20226bb1e1b0eff7ac495ef28&scene=21#wechat_redirect)

*   [作為一名 ABAP 資深顧問，下一步可以選擇哪一門 SAP 技術作為主攻方向？](http://mp.weixin.qq.com/s?__biz=MzI3MDE4MjM5Mg==&mid=2247492596&idx=1&sn=fe2ee727f1bad79006dd6fd13e875a89&chksm=ead65163dda1d875118de8db11f7aa64706e0428bce3c0b387c27ee31a76e11119e24e42049a&scene=21#wechat_redirect)

*   [SAP UI5應用開發人員瞭解UI5框架程式碼的意義](http://mp.weixin.qq.com/s?__biz=MzI3MDE4MjM5Mg==&mid=2247490638&idx=1&sn=2d48eeb6c0004950adaa97703e648796&chksm=ead5aed9dda227cf7b42b0f5f002a2517648f941695db22ddc09afa8725e1ca7960d69f4863e&scene=21#wechat_redirect)

*   [SAP UI5 module懶載入機制](http://mp.weixin.qq.com/s?__biz=MzI3MDE4MjM5Mg==&mid=2247490700&idx=1&sn=5aa8829849e249b31cc390e644b0cc6b&chksm=ead5ae1bdda2270d5c99f2e6b0649f4ad3e4eafc00f43be88fa89cfce8de134d0db24db3d9e7&scene=21#wechat_redirect)

*   [SAP UI5 控制元件渲染機制](http://mp.weixin.qq.com/s?__biz=MzI3MDE4MjM5Mg==&mid=2247490725&idx=1&sn=a99eaa85624d62fd9a8d5eb0fe382ace&chksm=ead5ae32dda2272447f691827b4a960dac4188adb9c82f8c29815531ba9a7939530153b00f17&scene=21#wechat_redirect)

*   [HTML原生事件 VS SAP UI5 Semantic事件](http://mp.weixin.qq.com/s?__biz=MzI3MDE4MjM5Mg==&mid=2247490756&idx=1&sn=72ad4fbfc919bc53a136ac2871890e46&chksm=ead5ae53dda227453a4e9d92400a6c2e17957b3040db928102d42a86a7d295d023b938c2c1ec&scene=21#wechat_redirect)

*   [SAP UI5控制元件後設資料的後設資料實現](http://mp.weixin.qq.com/s?__biz=MzI3MDE4MjM5Mg==&mid=2247491142&idx=1&sn=82b67f87d392f7e6a9c233f5a3f9b14b&chksm=ead5acd1dda225c7bec3b4c41e80c189a8b74359ececbff761bebacd2f8189633cac5f7a84a2&scene=21#wechat_redirect)

*   [SAP UI5控制元件的例項資料修改和讀取邏輯](http://mp.weixin.qq.com/s?__biz=MzI3MDE4MjM5Mg==&mid=2247491167&idx=1&sn=5b69e73118bfee9f399d941bc4be026f&chksm=ead5acc8dda225de8e92d10c3909280dfcb7d754b985ba268c1ed5e836137709ef23ac140744&scene=21#wechat_redirect)

*   [SAP UI5控制元件資料繫結的實現原理](http://mp.weixin.qq.com/s?__biz=MzI3MDE4MjM5Mg==&mid=2247491196&idx=1&sn=d5516ab572a9a292f40014361ddc1453&chksm=ead5acebdda225fd6cc100f2a5f9281d30aaeb238aa3801473c20614f093fb074c9c179337d5&scene=21#wechat_redirect)

*   [SAP UI5控制元件資料繫結的三種模式：One Way, Two Way和OneTime實現原理比較](http://mp.weixin.qq.com/s?__biz=MzI3MDE4MjM5Mg==&mid=2247491221&idx=1&sn=abaecc29eec83383f38ef5d79e98fa79&chksm=ead5ac02dda22514745c0762ecbed0b56116d9c80595cb1f4bc5fb863629da60cd71edefdd54&scene=21#wechat_redirect)

*   [談談 SAP UI5 的檢視控制元件 ID，以及其和 Angular 檢視的異同](http://mp.weixin.qq.com/s?__biz=MzI3MDE4MjM5Mg==&mid=2247492187&idx=1&sn=a8dbaa645c472b5c22771e512ed1b971&chksm=ead650ccdda1d9dab86ba16fb71ea5e90aa15918f3e3ac2c4237c9f5f03d51a12dac40280e70&scene=21#wechat_redirect)

*   [對 SAP UI5 一無所知的新手，從哪些材料開始學習比較好？](http://mp.weixin.qq.com/s?__biz=MzI3MDE4MjM5Mg==&mid=2247492258&idx=1&sn=7d3910109f2721dc316c0b8890091690&chksm=ead65035dda1d923924a5b186d4296a65d6efe2d08d8f4705abc52c42b349b2e95c255337f21&scene=21#wechat_redirect)

*   [SAP UI5 OData謠言粉碎機：極短時間內傳送兩個Odata request,前一個會自動被cancel掉嗎？](http://mp.weixin.qq.com/s?__biz=MzI3MDE4MjM5Mg==&mid=2247491291&idx=1&sn=237b0f4a83ffa8e047c7510d64a20dd6&chksm=ead5ac4cdda2255ae10700efd736c8f21d11bbf328149034a0d3df848667db2c6b13cf316fed&scene=21#wechat_redirect)

*   [SAP UI 搜尋分頁技術](http://mp.weixin.qq.com/s?__biz=MzI3MDE4MjM5Mg==&mid=2247484840&idx=1&sn=3e6d5397faa6f69579992337e7125bac&chksm=ead5b73fdda23e29a594a833d6c68d1fc26ac8077c54997b4d2b666fd1815e1d05c227ca3fa7&scene=21#wechat_redirect)

*   [如何在 SAP UI5 應用中整合第三方庫 ：一個在移動裝置上檢視 Web 應用列印除錯資訊的小技巧](http://mp.weixin.qq.com/s?__biz=MzI3MDE4MjM5Mg==&mid=2247492659&idx=1&sn=dd2b61252e04d2c22ed9eef6761a7fc3&chksm=ead656a4dda1dfb27ff0a6a61357455c29fa5ddf679686e482f28216637899a58c31803e1b87&scene=21#wechat_redirect)

基於 OData 模型和 JSON 模型的 SAP UI5 表格控制元件行專案的新增和刪除實現

相關文章