关于sap:基于-OData-模型和-JSON-模型的-SAP-UI5-表格控件行项目的添加和删除实现

8次阅读

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

这是 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-d…

将整个代码仓库克隆到本地，执行命令行 npm install, 而后执行 node local.js:

而后浏览器拜访 http://localhost:3002/tablede… 即可：

上图的表格控件，绑定到了 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/…

上面再实现基于 JSON 模型的表格控件行我的项目的增加和删除。

本例的源代码：

https://github.com/wangzixi-d…

新建 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 专题