在SAPUI5表中添加新行的按钮 [英] Button to add new row in SAPUI5 table

问题描述

我试图通过单击按钮在SAPUI5表上添加新行.我看过很多在线教程，但我找不到确切的用例.

I am trying to add new lines on a SAPUI5 table by a click of a button. I have seen plenty of online tutorials but I have not found exactly my use case.

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

The JSON is loaded through a mock server for now (for testing purposes and has this structure:

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

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

I have a table that is defined like this in the 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>

并且控制器包含此功能(我仅粘贴有效的部分):

and the controller contains this function (I am only pasting the part that works):

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

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

However, I am not sure how to proceed. I have tried push() in the model, but I am getting errors. What I was thinking of doing now is to add an empty row in oDt and bind it to the table, but I am not sure how to proceed with this, and whether it is the optimal solution.

编辑:如何将新的ColumnListItem添加到表中被标记为可能重复.这个问题是在同一主题上，但是OP的方法似乎与我的用例不匹配(我是SAPUI5的新手，所以我可能错了-在这种情况下，请原谅我.)

How to Add a New ColumnListItem to a Table was marked as potential duplicate. This question is on the same topic, but the approach of the OP does not seem to match my use case (I am new to SAPUI5, so I might be wrong - in which case, please forgive me).

推荐答案

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表中添加新行的按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！