Question

我有一个用XML编写的片段/视图，其中包含一个包含一些列和一个ColumnListItem的简单表：

<m:Table id="CorrectiveActionsTable">
  <m:columns>
    <m:Column>
      <m:Text text="Lfd. Nr"/>
    </m:Column>
    <m:Column width="30%">
      <m:Text text=""/>
    </m:Column>
    <m:Column>
      <m:Text text="gefordert von"/>
    </m:Column>
    <m:Column>
      <m:Text text="Durchführungsverantwortung"/>
    </m:Column>
    <m:Column>
      <m:Text text="Planungstermin"/>
    </m:Column>
    <m:Column>
      <m:Text text="IST-Termin"/>
    </m:Column>
  </m:columns>
  <m:ColumnListItem id="ListItem_00">
    <m:Text text="1"/>
    <m:TextArea
      value="senf"
      rows="6"
      width="100%"
    />
    <m:Input placeholder="bla"/>
    <m:Input placeholder="bla2"/>
    <m:DatePicker placeholder="bla3"/>
    <m:DatePicker placeholder="bla4"/>
  </m:ColumnListItem>
</m:Table>
<m:HBox>
  <m:Button
    text="Add Button"
    visible="true"
    press="onAddButton"
    icon="sap-icon://add"
  />
</m:HBox>

应该使用Button将新的ColumnListItem添加到表中我想我应该在控制器中编写onAddButton函数，但我不知道从哪里开始。

现在，我的控制器看起来像这样：

sap.ui.define([
  "sap/ui/core/mvc/Controller",
  "sap/m/ColumnListItem",
  "sap/m/Text",
  "sap/m/TextArea",
  "sap/m/Input",
  "sap/m/DatePicker"
], function(Controller, ColumnListItem, Text, TextArea, Input, DatePicker) {
  "use strict";

  return Controller.extend("...", {
    onAddButton: function(oEvent) {
      var columnListItemNewLine = new ColumnListItem({
        cells: [
          new Text({
            text: "1"
          }),
          new TextArea({
            value: "senf",
            rows: "6",
            width: "30%"
          }),
          new Input({
            type: "text",
            placeholder: "bla"
          }),
          new Input({
            type: "text",
            placeholder: "bla2"
          }),
          new DatePicker({
            placeholder: "bla3"
          }),
          new Datepicker({
            placeholder: "bla4"
          })
        ]
      });
      this._oTable.addItem(columnListItemNewLine);
    }
  });
});

而且我很确定有一种比我的方法更好的方法。

Answer 1

将数据集合绑定到表的<items>聚合。
当用户点击添加时，将新条目添加到模型（而不是直接添加到用户界面）。

由于聚合绑定，UI5将为您创建一个新的ColumnListItem ，并且您没有破坏MVC模式。以下是一些示例，使用..：

JSONModel

＆＃13;

sap.ui.getCore().attachInit(() => sap.ui.require([
  "sap/ui/core/mvc/XMLView",
  "sap/ui/model/json/JSONModel",
], (XMLView, JSONModel) => XMLView.create({
  definition: `<mvc:View
    xmlns:mvc="sap.ui.core.mvc"
    xmlns="sap.m"
    height="100%"
    displayBlock="true"
  >
    <Table sticky="ColumnHeaders" items="{/}">
      <headerToolbar>
        <OverflowToolbar>
          <Title text="My Items ({= %{/}.length})"/>
          <ToolbarSpacer/>
          <Button
            icon="sap-icon://add"
            press="onAddItemPress"
          />
        </OverflowToolbar>
      </headerToolbar>
      <columns>
        <Column>
          <Text text="Column 1" />
        </Column>
        <Column>
          <Text text="Column 2" />
        </Column>
      </columns>
      <ColumnListItem>
        <Text text="{col1}" />
        <Text text="{col2}" />
      </ColumnListItem>
    </Table>
  </mvc:View>`,
  models: new JSONModel([]),
}).then(view => view.placeAt("content"))));

function onAddItemPress(event) {
  const model = event.getSource().getModel();
  model.setProperty("/", model.getProperty("/").concat({
    col1: "newFoo",
    col2: "newBar",
  }));
}

＆＃13;

<script id="sap-ui-bootstrap"
  src="https://openui5.hana.ondemand.com/resources/sap-ui-core.js"
  data-sap-ui-libs="sap.ui.core, sap.m"
  data-sap-ui-preload="async"
  data-sap-ui-async="true"
  data-sap-ui-theme="sap_belize"
  data-sap-ui-compatversion="edge"
  data-sap-ui-xx-waitfortheme="true"
  data-sap-ui-xx-xml-processing="sequential"
></script>
<body id="content" class="sapUiBody sapUiSizeCompact"></body>

＆＃13;

此处，要调用的密钥API为setProperty。
⚠️DO NOT just push或手动修改模型数据。

ODataModel（v2）

致电createEntry及以后submitChanges将其发送至后端。
文档：OData V2 - Creating Entities
演示：plnkr.co/F3t6gI8TPUZwCOnA（点击 + 按钮创建一个新的＆＃34; Flight＆＃34;）。

Answer 2

尝试使用以下代码

onAddButton: function(oEvent){
        var columnListItemNewLine = new sap.m.ColumnListItem({
            cells:[
                new sap.m.Text({text: "1"}),
                new sap.m.TextArea({value: "senf", rows: "6", width: 
                "30%"}),
                new sap.m.Input({type: "text", placeholder: "bla"}),
                new sap.m.Input({type: "text", placeholder: "bla2"}),
                new sap.m.DatePicker({placeholder: "bla3"}),
                new sap.m.Datepicker({placeholder: "bla4"})
                ]
        });
        this._oTable.removeAllItems();
        this._oTable.addItem(columnListItemNewLine);
    }

将新项添加到表/列表中

2 个答案:

JSONModel

ODataModel（v2）