Question

我试图通过单击按钮在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>

并且控制器包含此功能（我只粘贴有效的部分）：

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

但是，我不知道该怎么办。我在模型中尝试了push()，但是我遇到了错误。我现在想做的是在oDt中添加一个空行并将其绑定到表中，但我不知道如何继续这个，以及它是否是最佳解决方案。

编辑： 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();

用于在SAPUI5表中添加新行的按钮

1 个答案: