Question

这个问题是对此的跟进：Button to add new row in SAPUI5 table

在我的新场景中，我添加了一个＆＃34;删除＆＃34;表格第一列中的按钮。同样，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 width="50px"/>
        <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>
                <Button icon="sap-icon://delete" press="deleteRow" type="Reject"/>
                <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() {
    this.getView().getModel("invoice").create("/Invoices", {
        ProductName: "",
        Quantity: "",
        ShippedDate: "",
        Status: ""
    });
}

我正在尝试构建一个用于删除的内容。这就是我到目前为止所做的：

deleteRow: function(oArg) {
    // var array = oArg.oSource.sId.split("-");
    // var index = array[array.length - 1];

    var path = oArg.oSource.oPropagatedProperties.oBindingContexts.invoice.sPath;

    delete this.getView().getModel("invoice").oData[path.substr(1)];
    this.getView().getModel("invoice").refresh(true);
}

但是行被清空然后再次返回（就像再次从模拟服务器获取）。我试图完全删除行（不仅仅是其内容），以及要删除的数据。

我在网上看过很多例子，但没有一个涵盖我的用例。

Answer 1

如果您已经使用create创建新行，那么我认为最好是保持一致并使用删除来删除它。所以在你的情况下，我认为你的代码应该是这样的：

this.getView().getModel("invoice").remove(path);

这一行将同时执行两项操作：

执行 DELETE 请求以删除服务器上的对象（如果您使用的是oDataModel）
将删除表格中的行并刷新它，因为该表格与此模型有关

如果可以，请在代码中使用绑定。使用绑定更加高效且易于维护，因为您不需要处理任何DOM对象。您在代码中唯一需要做的就是创建/删除/更新模型对象，UI5运行时将为您完成剩下的工作。

如何从表中删除行

1 个答案: