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

在企业级前端应用的需求中，因为 2B 用户需求的复杂度，在表格行项目里实现增删改查是一个比较常见的需求。

本文介绍如何使用 UI5 这个企业级前端应用开发框架，实现表格行项目的增删改查需求的具体技术细节。开发步骤通过 OData 模型和 JSON 模型这一对服务器端和客户端数据模型来讲解。

首先我们要明确一点，UI5 表格控件，同时支持 OData 模型 和 JSON 模型。因此，各位同行在面向 StackOverflow 或者 Google 编程时，务必先弄清楚，从网上复制粘贴的代码片段，使用的模型类型是否和自己项目中用到的一致。

首先了解这两个模型的区别。

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() 将客户端更新的数据发送回服务器。

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 模型支持增量加载机制(或称 Lazy Loading，延迟加载，懒加载)。

大家在实际学习中，不妨把 JSON 模型的客户端特性，和 OData 模型的服务器端特性，类比成网页的客户端渲染和服务器端渲染。

首先来学习在基于 OData 模型的 UI5 表格控件里如何实现行项目的增添和删除需求。

这个例子的全部源代码，在我的 Github 上：

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

然后浏览器访问 http://localhost:3002/tabledelete/ 即可：

上图的表格控件，绑定到了 OData 服务 Products entitySet 包含的两个字段：Name 和 Size.

XML 视图的源代码：

<core:View xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m"
  controllerName="sap.ui.demo.tabledelete.Table"
xmlns:html="http://www.w3.org/1999/xhtml">
    
  <Table id="jerrytable" items="{/Products}">
    <headerToolbar>
      <Toolbar>
        <Button icon="sap-icon://add" text="Row" press="addRow"/>
      </Toolbar>
    </headerToolbar>
      <columns>
      <Column width="50px"/>
      <Column>
        <Text text="Product" />
      </Column>
       <Column
        minScreenWidth="Tablet"
        demandPopin="true"
        >
        <Text text="Dimensions" />
      </Column>
      </columns>
      <items>
        <ColumnListItem>
        <cells>
          <Button icon="sap-icon://delete" press="deleteRow" type="Reject"/>
          <Input value="{Name}"/><Input value="{Size}"/>
        </cells>
      </ColumnListItem>
      </items>
      </Table>
</core:View>

在 Table 控制器的 onInit 方法里，我使用 ODataModel 的构造器，创建了一个 OData 模型实例，将其通过 setModel 方法赋给表格实例 oTable. 模型构造器需要传入一个 OData 服务的路径，这里我传入的路径 /here/goes/your/serviceUrl, 指向的是我本地 MockServer 提供的虚拟 OData 服务。

onInit: function() {
      var oTable = this.byId("jerrytable");
      var sServiceUrl = "/here/goes/your/serviceUrl/";
      // @ts-ignore
      oTable.oModel = new sap.ui.model.odata.ODataModel(sServiceUrl, true);
      oTable.setModel(oTable.oModel);
    },

表格控件行项目的添加和删除，直接调用 OData 服务对应的 create 和 remove 方法即可，如下图高亮代码行所示。

addRow : function(oArg){
      var oTable = this.byId("jerrytable");
      var oNewProduct = {
        ProductId: "999",
        Name: "myProduct"
      };
      oTable.oModel.create("/Products", oNewProduct, {success: ()=> alert("new Product created ok."), error: 
      () => alert("Product creation failed.")});
    },
    deleteRow: function(oEvent){
      var oTable = this.byId("jerrytable");
      var oSelectedItem = oEvent.getSource().getBindingContext().getObject();
      oTable.oModel.remove(`/Products('${oSelectedItem.ProductId}')`, {success: ()=> alert(`Product ${oSelectedItem.ProductId} deleted ok.`), error: 
      () => alert(`Product ${oSelectedItem.ProductId} deleted failed.`)});
    }

OData 模型的 create 和 remove 方法调用后，会发送对应的 HTTP 请求到对应的服务器。注意，在添加和删除行项目的事件处理代码里，我们并未手动编写表格控件的刷新操作，因为 OData 模型是一个服务器端模型，当我们调用 OData 模型的 create 和 remove 方法执行完毕之后，OData 模型会自动发起另一个 read 请求，从服务器端获取最新的数据，并自动刷新表格控件。

关于 SAP UI5 基于 OData 模型的 Table 控件，在显示和数据发生变化时发送的 OData 请求，请参考笔者制作的这个视频。

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

新建 JSON 模型实例，并绑定到表格控件实例的代码如下图所示。其中 this.data.Products 数组变量，维护的是该 JSON 模型硬编码的全部本地数据：

用户在界面点击按钮试图添加和删除行项目，我们需要做的操作是修改 JSON 模型绑定的 Products 数组，然后调用 JSON 模型的 refresh 方法，手动触发 UI 的刷新。刷新模型数据之后，通过 JSON 模型的双向绑定机制，就能自动实现 UI 界面的同步刷新。

// @ts-nocheck
sap.ui.define(["sap/ui/core/util/MockServer"], function (MockServer) {
  "use strict";
  return {
    init: function () {
      var oMockServer = new MockServer({
        rootUri: "/here/goes/your/serviceUrl/"
      });
      MockServer.config({
        autoRespond: true,
        autoRespondAfter: 1000
      });
      oMockServer.attachAfter(sap.ui.core.util.MockServer.HTTPMETHOD.GET, function(oEvent) {
        var aData = oEvent.getParameter("oFilteredData").results;
        for( var i = 0; i < aData.length; i++){
          aData[i].Name = aData[i].Name + ".";
        }}
      );
      var sPath = jQuery.sap.getModulePath("sap.ui.demo.tabledelete.test.service");
      oMockServer.simulate(sPath + "/metadata.xml", sPath);
      oMockServer.start();
    }
  };
});

从以上 JSON 模型的实现可以看出，该表格显示的全部数据，均位于客户端维护的 this.data.Products 数组里。正如 UI5 官网所言，JSON 模型只适合数据量较小的表格内容展示。如果表格的数据源来自 SAP 系统后台，采用 JSON 模型实现的表格应用，将会遇到可扩展性(scalability) 问题。在这种情形下，OData 模型是更好的选择。

总结

本文介绍了基于 OData 和 JSON 两种数据模型下的 UI5 表格行项目的数据增删改查实现细节，希望对有类似开发任务的同行有参考意义。