這是 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 模型是伺服器端模型，這意味着完整的資料集僅儲存在伺服器上，用戶端隻能感覺到目前請求的資料。排序和過濾等操作都是在伺服器上完成的。用戶端向伺服器發送請求并顯示傳回的資料。
關于 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 應用列印調試資訊的小技巧