Search code examples
sapui5

Delete Multiple Rows (sap.ui.table.Table)


I am working on SAPUI5 Table, I have created a functionality to delete selected rows from the table but when I select to delete more than one rows, it is deleting wrong rows. Although first selected row is deleted correctly, others are not.

fDeleteRow: function(oEvent) {
    var oTable = this.getView().byId("tbl");
    var data = oTable.getModel();
    var selRowCount = oTable._oSelection.aSelectedIndices.length;
    var Flag = false;
    for (var i = 0; i < selRowCount; i++) {
        var rowNum = oTable._oSelection.aSelectedIndices[i];
        data.oData.splice(rowNum, 1);
        data.oData.refresh();
        Flag = true;
    }
    if (Flag) {
        var oModelJson = new sap.ui.model.json.JSONModel();
        oModelJson.setData(data.oData);
        oTable.unbindColumns();
        oTable.unbindRows();
        oTable.setModel(oModelJson);
        oTable.bindRows("/");
    }
}

Solution

  • Here is an example http://jsbin.com/ducuyah/edit?html,js,output

    You need to reverse the selected indices first before splicing. and please do not use private member in the table

    var oTable = new sap.ui.table.Table({
      rows: '{/d/results}',
      title: new sap.m.Button({
        icon: 'sap-icon://delete',
        press: function() {
          var oModel = oTable.getModel();
          var oData = oModel.getProperty('/d/results');
          var reverse = [].concat(oTable.getSelectedIndices()).reverse();
          reverse.forEach(function(index) {
            oData.splice(index, 1);
          });
          oModel.refresh();
          oTable.setSelectedIndex(-1);
        }
      }),
      columns: [
        new sap.ui.table.Column({
          width: '100px',
          label: new sap.ui.commons.Label({text: "District Name"}),
          template: new sap.ui.commons.TextView({text:"{District}"})
        }),
        new sap.ui.table.Column({
          width: '80px',
          label: new sap.ui.commons.Label({text: "County"}),
          template: new sap.ui.commons.TextView({text:"{County}"})
        })]
    });
    
    
    var model = new sap.ui.model.json.JSONModel({
      d: {
        results: [
          { District: "D1", County: "C1"},
          { District: "D2", County: "C2"},
          { District: "D3", County: "C3"},
          { District: "D4", County: "C4"},
          { District: "D5", County: "C5"},
          { District: "D6", County: "C1"},
          { District: "D7", County: "C2"},
          { District: "D8", County: "C3"},
          { District: "D9", County: "C4"},
          { District: "D5", County: "C5"},
          { District: "D10", County: "C1"},
          { District: "D11", County: "C2"},
          { District: "D12", County: "C3"},
          { District: "D13", County: "C4"},
          { District: "D14", County: "C5"},
        ] 
      }
    });
    
    oTable.setModel(model);
    oTable.placeAt('content');
    oTable.setFirstVisibleRow(10);
    oTable.setSelectedIndex(10);