SAP UI5 - 无法从表中删除选定的行答案

【问题标题】：SAP UI5 - Cannot delete selected row from tableSAP UI5 - 无法从表中删除选定的行
【发布时间】：2013-12-05 08:30:21
【问题描述】：

我有一个视图，其中包含一个具有单选模式的表格，其工具栏中有一个用于删除所选行的按钮。

虽然当我按下按钮时，它会删除所有行。

我的代码：

查看文件：

<template data-controller-name="myapplication.myview2">
    <div data-sap-ui-type="sap.ui.table.Table" id="tb1" data-width="100%" data-title="Person Table"></div>
</template>

控制器文件：

onInit: function() {
        try {
            var oTab = [
                        // the table content

                        ];
            var oToolbar = new sap.ui.commons.Toolbar();
            oToolbar.addItem(new sap.ui.commons.Button({text: "Delete selected row", 
                press: function() {
                    try {
                        var newTab = this.getParent().getParent();
                        var index = newTab.getSelectedIndex();
                        if (index == -1)
                            alert("No row selected");
                        else {
                            var currModel = newTab.getModel();
                            var selectedRow = newTab.getRows()[index];
                            newTab.removeRow(selectedRow);
                            currModel.setData({table: newTab});
                            newTab.bindRows("/table");                  
                        }
                    } catch (err) {
                        txt = "There was an error on this page.\n\n";
                        txt += "Error description: " + err.message + "\n\n";
                        txt += "Click OK to continue.\n\n";
                        alert(txt);
                    }
                }}));
            this.byId("tb1").setToolbar(oToolbar);
            this.byId("tb1").setVisibleRowCount(5);
            this.byId("tb1").setNavigationMode(sap.ui.table.NavigationMode.Paginator);

            // Columns definition should be HERE

            var oModel = new sap.ui.model.json.JSONModel();
            oModel.setData({table: oTab});
            this.byId("tb1").setModel(oModel);
            this.byId("tb1").bindRows("/table");

        } catch (err) {
            txt = "There was an error on this page.\n\n";
            txt += "Error description: " + err.message + "\n\n";
            txt += "Click OK to continue.\n\n";
            alert(txt);
        }
    },
// More functions....

有什么想法吗？

【问题讨论】：

标签： javascript model-view-controller sapui5

【解决方案1】：

您需要从模型中删除行，而不是直接从表中删除。

【讨论】：

【解决方案2】：

这是一个如何做到这一点的示例。

http://jsbin.com/yewula/1/edit

就像许多人建议的那样，我们应该将它从模型中删除。由于 table 绑定到模型，table 会相应刷新。

-D

【讨论】：

【解决方案3】：

在删除按钮的按下函数中，获取有关表格的更多详细信息：

var tableIndex = newTab.getSelectedIndex();
var context = newTab.getContextByIndex(tableIndex);
var path = context.getPath();

在变量path中，您将找到与表格行索引对应的数据索引。使用此数据索引从模型中删除行。

currModel.oData.table.splice(data_index, 1);

之后，所需要的只是刷新模型以通知控件有关更改的数据。而且，对于用户来说，如果表格中的选择也被重置也可能会很好。

currModel.refresh();
newTab.setSelectedIndex(-1);

【讨论】：