发表新帖
发表新帖

Add a New Item to a Table / List

后端 未结
关注
2 2005
猫巷女王i
猫巷女王i 2020-11-28 16:55

I have a fragment / view written in XML which contains a simple table with some columns and one ColumnListItem:
相关标签:
2条回答
  • 盖世英雄少女心
    2020-11-28 17:21

    Try with this code below

    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);
    }
    0 讨论(0)
  • 遇见更好的自我
    2020-11-28 17:30
    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.

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

    v2.ODataModel

    • 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

    v4.ODataModel

    • See the documentation topic OData V4 - Creating an Entity.

    JSONModel

    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>

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

    0 讨论(0)
 看不清?
提交回复
热议问题