如何从表中删除行 [英] How to Remove Row from Table

问题描述

这个问题是对这个问题的跟进:在 SAPUI5 表中添加新行的按钮

This question is a follow up to this: Button to add new row in SAPUI5 table

在我的新场景中，我在表格的第一列中添加了一个删除"按钮.同样，JSON 文件如下所示:

In my new scenario, I have added a "remove" button in the first column of the table. Again, the JSON file looks like this:

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

我的 view 现在看起来像这样:

My view now looks like this:

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

而且我有一个添加行的功能(这个功能很好):

And I have a function for adding a row (this one works fine):

addRow: function() {
    this.getView().getModel("invoice").create("/Invoices", {
        ProductName: "",
        Quantity: "",
        ShippedDate: "",
        Status: ""
    });
}

我正在尝试构建一个用于删除.这是我目前所拥有的:

And I am trying to build one for deleting. This is what I have so far:

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);
}

但是该行被清空然后再次返回(就像再次从模拟服务器获取).我正在尝试完全删除该行(不仅仅是其内容)以及要删除的数据.

But the row gets emptied and then returns again (like getting fetched from the mock server again). I am trying to completely remove the row (not just its contents), and the data to be removed.

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

I have seen plenty of examples online, but none cover my use case.

推荐答案

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

If you already use create for create new row then I think the best is to be consistent and use remove in order to remove it. so in your case I think your code should look something like this:

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

这一行将同时完成:

1. 执行DELETE请求以删除服务器上的对象(如果您使用的是oDataModel)
2. 将从表中删除该行并刷新它，因为该表绑定到此模型

1. Execute DELETE request to delete the object on the server (if you are using oDataModel)
2. Will delete the row from the table and refresh it because the table is bounded to this model

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

If you can please always use binding in your code. Using binding is much more efficient and easy to maintain because you don't need to deal with any DOM objects. The only thing that you need to do in code is creating/deleting/updating your model objects and UI5 runtime will do the rest for you.

这篇关于如何从表中删除行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！