SAP UI5中如何优化实现按钮添加新ColumnListItem至表格？

嘿，你的思路没问题，但确实有更优雅、易维护的方式来实现这个需求，毕竟SAP UI5的MVC和模块化特性就是用来帮我们减少重复代码、提升扩展性的。下面给你几个优化方案，按推荐程度排序：

把重复的ColumnListItem结构抽成XML片段，和视图代码保持一致，后续修改UI结构时只需要改一处，不用同时动控制器代码。

首先创建一个名为NewRow.fragment.xml的片段文件：

<core:FragmentDefinition xmlns:core="sap.ui.core" xmlns:m="sap.m">
  <m:ColumnListItem>
    <m:cells>
      <m:Text text="{rowModel>/number}" />
      <m:TextArea value="" rows="6" width="100%" />
      <m:Input placeholder="bla"/>
      <m:Input placeholder="bla2"/>
      <m:DatePicker placeholder="bla3"/>
      <m:DatePicker placeholder="bla4"/>
    </m:cells>
  </m:ColumnListItem>
</core:FragmentDefinition>

然后修改控制器代码，通过片段加载新行：

sap.ui.define([
  "sap/ui/core/mvc/Controller",
  "sap/ui/core/Fragment",
  "sap/ui/model/json/JSONModel"
], function(Controller, Fragment, JSONModel) {
  "use strict";
  return Controller.extend("你的命名空间.Controller", {
    onAddButton: function(oEvent) {
      const oTable = this.byId("CorrectiveActionsTable");
      // 加载XML片段
      Fragment.load({
        name: "你的命名空间.NewRow", // 替换成实际的片段路径
        controller: this
      }).then((oNewRow) => {
        // 计算新行的序号
        const newRowNum = oTable.getItems().length + 1;
        // 给新行绑定临时模型存序号
        const oRowModel = new JSONModel({ number: newRowNum });
        oNewRow.setModel(oRowModel, "rowModel");
        // 添加到表格
        oTable.addItem(oNewRow);
      });
    }
  });
});

如果你的表格数据本来就来自模型，那直接操作模型是最省心的——表格会自动根据模型数据渲染行，完全不用手动创建控件。

先修改视图，给表格绑定模型并设置行模板：

<m:Table id="CorrectiveActionsTable" items="{actionsModel>/rows}">
  <m:columns>
    <!-- 保持原有的列定义不变 -->
  </m:columns>
  <!-- 用模型绑定替代硬编码的ListItem -->
  <m:ColumnListItem>
    <m:cells>
      <m:Text text="{actionsModel>/rowNumber}" />
      <m:TextArea value="{actionsModel>/actionContent}" rows="6" width="100%" />
      <m:Input placeholder="bla" value="{actionsModel>/requestedBy}"/>
      <m:Input placeholder="bla2" value="{actionsModel>/responsible}"/>
      <m:DatePicker placeholder="bla3" value="{actionsModel>/planDate}"/>
      <m:DatePicker placeholder="bla4" value="{actionsModel>/actualDate}"/>
    </m:cells>
  </m:ColumnListItem>
</m:Table>

然后在控制器里初始化模型并实现添加逻辑：

sap.ui.define([
  "sap/ui/core/mvc/Controller",
  "sap/ui/model/json/JSONModel"
], function(Controller, JSONModel) {
  "use strict";
  return Controller.extend("你的命名空间.Controller", {
    onInit: function() {
      // 初始化表格数据模型
      const oInitialData = {
        rows: [
          {
            rowNumber: 1,
            actionContent: "senf",
            requestedBy: "",
            responsible: "",
            planDate: "",
            actualDate: ""
          }
        ]
      };
      const oActionsModel = new JSONModel(oInitialData);
      this.getView().setModel(oActionsModel, "actionsModel");
    },

    onAddButton: function(oEvent) {
      const oModel = this.getView().getModel("actionsModel");
      const aCurrentRows = oModel.getProperty("/rows");
      // 添加新行数据
      aCurrentRows.push({
        rowNumber: aCurrentRows.length + 1,
        actionContent: "",
        requestedBy: "",
        responsible: "",
        planDate: "",
        actualDate: ""
      });
      // 更新模型，表格会自动渲染新行
      oModel.setProperty("/rows", aCurrentRows);
    }
  });
});

如果你暂时不想改架构，先把现有代码的bug fix掉：你写的new Datepicker({...})是拼写错误，应该是new DatePicker({...})（首字母大写），这个会导致运行时报错。

内容的提问来源于stack exchange，提问作者Penrock