SAPUI5表行删除不起作用

时间:2015-12-04 23:19:58

标签: sapui5

在SAP UI5中,如果表按任何列排序,则删除不起作用。打开以下链接并按客户ID对表进行排序,然后尝试删除任何行,您将注意到错误的行被删除。请帮忙!

https://jsbin.com/qiqexo/edit?html,output

1 个答案:

答案 0 :(得分:3)

首先确保你don't mix sap.ui.commons and sap.m - 无论如何......

您正在尝试从表中删除一行,该表从JSONModel获取其数据。为了安全起见,你必须找到正确的"行数据"在删除它之前在模型中。您不能只使用表的选定索引,因为此索引与相应模型数据的索引不相关!因此,您需要做的是使用表API从属于所选行的模型中获取数据。之后你必须为这个"数据"找到正确的索引。在模型中,即通过循环模型数据并比较唯一标识符(在我们的例子中是OrderID)或使用一些更智能/更快的算法......一旦获得数据,只需将其从模型中删除...

这是一个工作示例,甚至可以用于排序(jsbin



<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Remove row from Table with JSONModel in SAPUI5 | nabisoft</title>
        <script src="https://openui5.hana.ondemand.com/resources/sap-ui-core.js"
            id="sap-ui-bootstrap"
            data-sap-ui-theme="sap_bluecrystal"
            data-sap-ui-libs="sap.ui.table,sap.m"
            data-sap-ui-bindingSyntax="complex"
            data-sap-ui-compatVersion="edge"
            data-sap-ui-preload="sync"></script>
            <!-- use "sync" or change the code below if you have issues -->

        <script>
            var oTable, oModel;

            oTable = new sap.ui.table.Table({
                selectionMode: sap.ui.table.SelectionMode.Single,
                columns: [
                    new sap.ui.table.Column({
                      label: new sap.m.Label({text: "Order ID"}),
                      template: new sap.m.Input({value: "{OrderID}"}),
                      sortProperty : "OrderID"
                    }),
                    new sap.ui.table.Column({
                      label: new sap.m.Label({text:"Customer ID"}),
                      template: new sap.m.Input({value: "{CustomerID}"}),
                      sortProperty : "CustomerID"
                    })
                ]
            });

            oModel = new sap.ui.model.json.JSONModel([
                {OrderID:10248,CustomerID:"VINET"},{OrderID:10249,CustomerID:"TOMSP"},{OrderID:10250,CustomerID:"HANAR"},
                {OrderID:10251,CustomerID:"VICTE"},{OrderID:10252,CustomerID:"SUPRD"},{OrderID:10253,CustomerID:"HANAR"},
                {OrderID:10254,CustomerID:"CHOPS"},{OrderID:10255,CustomerID:"RICSU"},{OrderID:10256,CustomerID:"WELLI"},
                {OrderID:10257,CustomerID:"HILAA"},{OrderID:10258,CustomerID:"ERNSH"},{OrderID:10259,CustomerID:"CENTC"},
                {OrderID:10260,CustomerID:"OTTIK"},{OrderID:10261,CustomerID:"QUEDE"},{OrderID:10262,CustomerID:"RATTC"},
                {OrderID:10263,CustomerID:"ERNSH"},{OrderID:10264,CustomerID:"FOLKO"},{OrderID:10265,CustomerID:"BLONP"},
                {OrderID:10266,CustomerID:"WARTH"},{OrderID:10267,CustomerID:"FRANK"},{OrderID:10268,CustomerID:"GROSR"},
                {OrderID:10269,CustomerID:"WHITC"},{OrderID:10270,CustomerID:"WARTH"},{OrderID:10271,CustomerID:"SPLIR"},
                {OrderID:10272,CustomerID:"RATTC"},{OrderID:10273,CustomerID:"QUICK"},{OrderID:10274,CustomerID:"VINET"},
                {OrderID:10275,CustomerID:"MAGAA"},{OrderID:10276,CustomerID:"TORTU"},{OrderID:10277,CustomerID:"MORGK"},
                {OrderID:10278,CustomerID:"BERGS"},{OrderID:10279,CustomerID:"LEHMS"},{OrderID:10280,CustomerID:"BERGS"},
                {OrderID:10281,CustomerID:"ROMEY"},{OrderID:10282,CustomerID:"ROMEY"},{OrderID:10283,CustomerID:"LILAS"},
                {OrderID:10284,CustomerID:"LEHMS"},{OrderID:10285,CustomerID:"QUICK"},{OrderID:10286,CustomerID:"QUICK"},
                {OrderID:10287,CustomerID:"RICAR"},{OrderID:10288,CustomerID:"REGGC"},{OrderID:10289,CustomerID:"BSBEV"},
                {OrderID:10290,CustomerID:"COMMI"},{OrderID:10291,CustomerID:"QUEDE"},{OrderID:10292,CustomerID:"TRADH"},
                {OrderID:10293,CustomerID:"TORTU"},{OrderID:10294,CustomerID:"RATTC"},{OrderID:10295,CustomerID:"VINET"},
                {OrderID:10296,CustomerID:"LILAS"}
            ]);

            oTable.setModel(oModel);
            oTable.bindRows("/");
            oTable.placeAt("tableContent");

            new sap.m.Button({
                text: 'Delete',
                press : function() {
                    var idx, oRow, oRowData, oData, oRemoved;
                    idx = oTable.getSelectedIndex();
                    if (idx !== -1) {
                        // get the selected row data from the (json) model
                        oRow = oTable.getRows()[idx];
                        oRowData = oRow.getBindingContext().getObject();

                        // now we have to loop over the JSONModel to find the right entry
                        oData = oModel.getData();
                        for (i=0; i<oData.length; i++){
                            if(oData[i].OrderID === oRowData.OrderID){
                                // we found the right entry, now remove it from the model
                                oRemoved = oData.splice(i, 1);
                                oModel.refresh();

                                sap.m.MessageToast.show(JSON.stringify(oRemoved[0]) +  'is removed');
                                return;
                            }
                        }
                    } else {
                        sap.m.MessageToast.show('Please select a row');
                    }
                }
            }).placeAt('btnContent');

        </script>

    </head>

    <body class="sapUiBody">
        <div id="btnContent"></div>
        <div id="tableContent"></div>
    </body>
</html>
&#13;
&#13;
&#13;