javascript - 在 SAPUI5 表中添加新行的按钮

Question

这个问题已经有答案了:

Add a New Item to a Table / List (2 个回答)

已关闭 6 个月前。

我正在尝试通过单击按钮在 SAPUI5 表上添加新行。我看过很多在线教程，但我还没有找到确切的用例。

JSON 目前通过模拟服务器加载(出于测试目的，并且具有以下结构:

{
  "Invoices": [
    {
      "ProductName": "Pineapple",
      "Quantity": 21,
      "ExtendedPrice": 87.2000,
      "ShipperName": "Fun Inc.",
      "ShippedDate": "2015-04-01T00:00:00",
      "Status": "A"
    },
    ...
  ]
}

我有一个在view中像这样定义的表:

<mvc:View controllerName="stepbystep.demo.wt.controller.App" xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m" xmlns:core="sap.ui.core"
xmlns:html="http://www.w3.org/1999/xhtml" displayBlock="true">
<Table id="ins" items="{ path : 'invoice>/Invoices', sorter : { path : 'ProductName' } }">
    <headerToolbar>
        <Toolbar>
            <Button icon="sap-icon://add" text="Row" press="addRow"/>
            <Button icon="sap-icon://display" text="Row" press="fetchRecords"/>
        </Toolbar>
    </headerToolbar>
    <columns>
        <Column hAlign="Right" minScreenWidth="Small" demandPopin="true" width="4em">
            <Text text="{i18n>columnQuantity}"/>
        </Column>
        <Column>
            <Text text="{i18n>columnName}"/>
        </Column>
        <Column minScreenWidth="Small" demandPopin="true">
            <Text text="{i18n>columnStatus}"/>
        </Column>
        <Column minScreenWidth="Tablet" demandPopin="false">
            <Text text="{i18n>columnSupplier}"/>
        </Column>
        <Column hAlign="Right">
            <Text text="{i18n>columnPrice}"/>
        </Column>
    </columns>
    <items>
        <ColumnListItem type="Navigation" press="onPress">
            <cells>
                <ObjectNumber number="{invoice>Quantity}" emphasized="false"/>
                <ObjectIdentifier title="{invoice>ProductName}"/>
                <Text text="{ path: 'invoice>Status', formatter: '.formatter.statusText' }"/>
                <Text text="{invoice>ShipperName}"/>
                <ObjectNumber
                    number="{ parts: [{path: 'invoice>ExtendedPrice'}, {path: 'view>/currency'}], type: 'sap.ui.model.type.Currency', formatOptions: { showMeasure: false } }"
                    unit="{view>/currency}" state="{= ${invoice>ExtendedPrice} > 50 ? 'Error' : 'Success' }"/>
            </cells>
        </ColumnListItem>
    </items>
</Table>

并且 Controller 包含此功能(我只粘贴有效的部分):

addRow: function() {
    var oList = this.getView().byId("ins");
    var oDt = oList.getBinding("items").getModel().oData;
}

但是，我不知道如何继续。我已经尝试过push()在模型中，但我收到错误。我现在想做的是在oDt中添加一个空行并将其绑定(bind)到表上，但我不确定如何进行此操作，以及这是否是最佳解决方案。

编辑: How to Add a New ColumnListItem to a Table被标记为潜在的重复。这个问题是关于同一主题的，但是OP的方法似乎与我的用例不匹配(我是SAPUI5的新手，所以我可能是错的 - 在这种情况下，请原谅我)。

Answer 1

JSONModel :

this.getView().getModel('invoice').getProperty('/Invoices').push({/* new invoice data */})

ODataModel :

this.getView().getModel('invoice').create('/Invoices', {/* new invoice data */})

或

this.getView().getModel('invoice').createEntry('/Invoices', {/* new invoice data */})
this.getView().getModel('invoice').submitChanges();