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

龜雖壽曹操神龜雖壽，猶有竟時；騰蛇乘霧，終為土灰。老驥伏櫪，志在千里；烈士暮年，壯心不已。盈縮之期，不但在天；養怡之福，可得永年。幸甚至哉，歌以詠志。

最近收到一位朋友的咨詢，在項目實現中需要實現 SAP UI5 表格控件內的行項目刪除需求。這位朋友在網絡上搜索了一些示例代碼，拷貝到自己的 SAP UI5 應用中，執行發現報錯。

首先我們要明確一點，SAP UI5 表格控件，同時支持 OData 模型 和 JSON 模型。因此，在面向 StackOverflow 或者 Google 編程時(這也是 Jerry 鐘愛的開發方式之一)，務必先弄清楚，從網上復制粘貼的代碼片段，使用的模型類型是否和自己項目中用到的一致。

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

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 模型是服務器端模型，這意味著完整的數據集僅保存在服務器上，客戶端只能感知到當前請求的數據。排序和過濾等操作都是在服務器上完成的?？蛻舳讼蚍掌靼l送請求并顯示返回的數據。

關于 OData 模型服務器端工作模式的更多介紹，請參考 Jerry 之前的文章：SAP UI5 OData謠言粉碎機：極短時間內發送兩個Odata request,前一個會自動被cancel掉嗎？

OData 模型支持增量加載機制(或稱 Lazy Loading，延遲加載，懶加載)。關于這種機制的工作原理，請參考 Jerry 之前的文章：SAP UI 搜索分頁技術。

Jerry 把 JSON 模型的客戶端特性，和 OData 模型的服務器端特性，類比成網頁的客戶端渲染和服務器端渲染。更多細節，請查詢這篇文章：SAP UI渲染模式：客戶端渲染 VS 服務器端渲染。

關于 JSON 模型和 OData 模型的數據綁定實現原理介紹，請參考 Jerry 之前的文章：

• 深入學習SAP UI5框架代碼系列之六：SAP UI5控件數據綁定的實現原理

• 深入學習SAP UI5框架代碼系列之七：控件數據綁定的三種模式 - One Way, Two Way和OneTime實現原理比較

首先來學習在基于 OData 模型的 SAP UI5 表格控件里如何實現行項目的增添和刪除需求。

這個例子的全部源代碼，在我的 Github 上：

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

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

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

上圖的表格控件，綁定到了 OData 服務 Products entitySet 包含的兩個字段：Name 和 Size.

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

表格控件行項目的添加和刪除，直接調用 OData 服務對應的 create 和 remove 方法即可，如下圖高亮代碼行所示。

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 模型硬編碼的全部本地數據：

用戶在界面點擊按鈕試圖添加和刪除行項目，我們需要做的操作是修改 JSON 模型綁定的 Products 數組，然后調用 JSON 模型的 refresh 方法，手動觸發 UI 的刷新。刷新模型數據之后，通過 JSON 模型的雙向綁定機制，就能自動實現 UI 界面的同步刷新。

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

感謝閱讀。

Jerry 的 SAP UI5 專題

• 在沒有任何前端開發經驗的基礎上, 創建第一個 SAP Fiori Elements 應用

• 答網友提問：使用 SAP Fiori Tools 創建的 Fiori Elements 應用，如何進行二次開發？

• 本地開發好的 SAP Fiori Elements 應用，如何部署到 ABAP 服務器上

• 深入掌握 SAP Fiori Elements 工作原理的前提條件：理解 Smart Field

• 深入理解 SAP Fiori Elements 工作原理系列之二：如何給 SAP Fiori Elements 應用添加自定義按鈕

• SAP Fiori Elements 框架里 Smart Table 控件的工作原理介紹

• SAP Fiori Elements List Report Smart Table 列項目寬度計算的奧妙

• 作為一名 ABAP 資深顧問，下一步可以選擇哪一門 SAP 技術作為主攻方向？

• SAP UI5應用開發人員了解UI5框架代碼的意義

• SAP UI5 module懶加載機制

• SAP UI5 控件渲染機制

• HTML原生事件 VS SAP UI5 Semantic事件

• SAP UI5控件元數據的元數據實現

• SAP UI5控件的實例數據修改和讀取邏輯

• SAP UI5控件數據綁定的實現原理

• SAP UI5控件數據綁定的三種模式：One Way, Two Way和OneTime實現原理比較

• 談談 SAP UI5 的視圖控件 ID，以及其和 Angular 視圖的異同

• 對 SAP UI5 一無所知的新手，從哪些材料開始學習比較好？

• SAP UI5 OData謠言粉碎機：極短時間內發送兩個Odata request,前一個會自動被cancel掉嗎？

• SAP UI 搜索分頁技術

• 如何在 SAP UI5 應用中集成第三方庫 ：一個在移動設備上查看 Web 應用打印調試信息的小技巧

更多Jerry的原創文章，盡在：“汪子熙”:

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的基于 OData 模型和 JSON 模型的 SAP UI5 表格控件行项目的添加和删除实现的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。