向表/列表添加新项目 [英] Add a New Item to a Table / List

问题描述

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

I have a fragment / view written in XML which contains a simple table with some columns and one 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>

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

The Button should be used to add a new ColumnListItem to the Table.
I think I should write the onAddButton function in the controller but I don't know where to start.

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

For now, my controller looks like this:

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);
    }
  });
});

而且我很确定有比我的方法更好的方法.

And I'm pretty sure there is a better way to do this than my approach.

推荐答案

1. 将数据集合绑定到表的聚合.
2. 当用户点击添加时，将新条目添加到模型(而不是直接添加到 UI).

1. Bind the collection of data to the <items> aggregation of table.
2. Add a new entry to the model (instead of to the UI directly) when the user clicks on Add.

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

Thanks to the aggregation binding, UI5 will create a new ColumnListItem for you and you did not break the MVC pattern. Here are some examples, using..:

• 调用createEntry 和之后的 submitChanges 将其发送到后端.
• 演示:plnkr.co/F3t6gI8TPUZwCOnA(点击添加按钮创建一个新的航班").
• 文档:

• Call createEntry and later submitChanges to send it to backend.
• Demo: plnkr.co/F3t6gI8TPUZwCOnA (Click on the Add button to create a new "Flight").
• Documentation: OData V2 - Creating Entities

• 请参阅文档主题OData V4 - 创建实体.

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",
  }));
}

<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>

对于JSONModel等客户端模型，调用setProperty 就足够了.请勿使用push或手动修改内部模型数据.

For client-side models such as JSONModel, calling setProperty is sufficient. DO NOT use push or modify the internal model data manually.

这篇关于向表/列表添加新项目的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！