这是杰瑞2021年的第62篇文章，也是王子熙的第339篇原创文章公众号。乌龟虽长寿曹操乌龟虽长寿，但还有一时；蛇乘雾中，终必化为灰烬。老人有千里之志；烈士晚年志存高远。过剩和收缩的时期不仅在天空中；滋养幸福之福，可得永??生。幸偶哉，歌唱志向。最近接到一个朋友的咨询，在项目实施中需要实现SAPUI5表格控件中行项目删除的需求。这位朋友在网上搜索了一些示例代码，复制到自己的SAPUI5应用中，执行后发现报错。首先我们要明确SAPUI5表单控件同时支持OData模型和JSON模型。因此，在为StackOverflow或Google编程时（这也是Jerry最喜欢的开发方式之一），首先要弄清楚从网上复制粘贴的代码片段中使用的模型类型是否与自己项目中使用的一致.首先了解一下这两种型号的区别。SAPUI5官网定义了JSON模型：JSON模型是客户端模型，因此适用于小数据集，完全在客户端可用。JSON模型不支持基于服务器的分页或增量加载机制。但是，它支持双向绑定。此外，像JSON模型这样的客户端模型没有内置支持将数据发送回服务器。例如，应用程序必须使用model.getData()和jQuery.ajax()将更新的数据发送到服务器。JSON模型是客户端模型，适用于客户端完全可用的小型数据集。JSON模型不支持基于服务器的分页或增量加载机制。与OData模型不同，JSON模型不支持将数据发送回服务器。应用程序开发人员必须手动调用model.getData()和jQuery.ajax()以将更新后的数据从客户端发送回服务器。SAPUI5官网定义OData模型：OData模型是服务端模型，意思是数据集只在服务端可用，客户端只知道当前可见（请求）的数据。诸如排序和过滤之类的操作在服务器上完成。客户端向服务器发送请求并显示返回数据。OData模型是服务端模型，也就是说完整的数据集只保存在服务端，客户端只能感知当前请求的数据。排序、过滤等操作都是在服务器上完成的。客户端向服务器发送请求并显示返回的数据。更多关于OData模型的服务端工作模式可以参考Jerry之前的文章：SAPUI5ODataRumorCrusher:极短时间内发送两个Odata请求，前一个会自动取消吗？OData模型支持增量加载机制（或LazyLoading，延迟加载，延迟加载）。该机制的工作原理可以参考Jerry之前的文章：SAPUI搜索分页技术。Jerry将JSON模型的客户端特性和OData模型的服务器端特性比作网页的客户端渲染和服务器端渲染。更详细的可以参考这篇文章：SAPUI渲染模式：客户端渲染VS服务端渲染。JSON模型和OData模型的数据绑定实现原理介绍可以参考Jerry之前的文章：深入学习SAPUI5框架代码系列之六：SAPUI5控件数据绑定的实现原理深入学习SAPUI5框架代码系列之七：控件数据绑定的三种模式——OneWay、TwoWay和OneTime实现原理对比首先，我们来学习一下如何实现基于OData模型的SAPUI5表格控件中行项的增删改查。这个例子的全部源码在我的Github上：https://github.com/wangzixi-d...将整个代码仓库clone到本地，执行命令行npminstall，然后执行nodelocal.js:并浏览You可以从服务器访问http://localhost:3002/tablede...：上图中的表格控件绑定了OData服务ProductsentitySet中包含的两个字段：Name和Size。在Table控制器的onInit方法中，我使用ODataModel构造函数创建一个OData模型实例，并通过setModel方法将其赋值给表实例oTable。模型构造函数需要传入OData服务的路径。这里我传入路径/here/goes/your/serviceUrl，指向我本地MockServer提供的虚拟OData服务。关于如何使用SAPUI5MockServer，Jerry的后续文章会介绍。表格控件行项的增删改查，直接调用OData服务对应的create和remove方法即可，如下图高亮代码行。调用OData模型的create和remove方法后，会向相应的服务器发送相应的HTTP请求。注意，在增删行的事件处理代码中，我们并没有手动编写表格控件的刷新操作，因为OData模型是服务端模型。在我们调用了OData模型的create和remove方法后，OData模型会自动发起另一个读取请求，从服务器获取最新的数据，并自动刷新表格控件。基于SAPUI5的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数组中。正如SAPUI5官网所说，JSON模型只适合展示数据量较小的表格内容。如果表的数据源来自SAP系统后台，使用JSON模型实现的表应用会遇到扩展性问题。在这种情况下，OData模型是更好的选择。谢谢阅读。Jerry的SAPUI5题目，在没有任何前端开发经验的情况下，创建了第一个SAPFioriElements应用来回答网友的问题：如何对使用SAPFioriTools创建的FioriElements应用进行二次开发？如何将本地开发的SAPFioriElements应用部署到ABAP服务器深入理解SAPFioriElements工作原理的前提：理解SmartField深入理解SAPFioriElements工作原理系列之二：如何添加自定义SAPFioriElements应用按钮SAPFioriElements框架中SmartTable控件的工作原理介绍SAPFioriElementsListReportSmartTable中计算列项宽度的奥秘作为ABAP资深顾问，SAP技术可以你选择作为下一步的主要进攻方向？SAPUI5应用开发者理解UI5框架代码含义SAPUI5模块懒加载机制SAPUI5控件渲染机制HTML原生事件VSSAPUI5语义事件元数据SAPUI5控件元数据实现实例数据修改和读取逻辑SAPUI5控件的实现原理SAPUI5控件数据绑定SAPUI5控件数据绑定的三种模式：OneWay、TwoWay和OneTime实现原理比较说说SAPUI5的视图控件ID，以及它与Angular视图的异同。对于了解不多的初学者，从什么资料开始学习比较好？SAPUI5OData辟谣者：极短时间内发送两个Odata请求，前一个会自动取消吗？SAPUI搜索和分页技术如何在SAPUI5应用中集成第三方库：移动设备上查看web应用打印调试信息的小技巧
