在现有表格中添加新行

Question

我想用现有表格添加新行。

我的代码：

onInit: function() { 
    var oModel = new sap.ui.model.json.JSONModel("Model/Clothing.json"); 
    this.getView().setModel(oModel); 
    var table = this.getView().byId("tableid"); 
    table.bindItems("/catalog/clothing/categories", new sap.m.ColumnListItem({ 
     type: "Navigation", 
     press: function(evt) {}, 
     cells: [ 
     new sap.m.Text({ 
      text: "{name}" 
     }), new sap.m.Text({ 
      text: "{amount}" 
     }), new sap.m.Text({ 
      text: "{currency}" 
     }), new sap.m.Text({ 
      text: "{size}" 
     }) 
     ] 
    })); 
    table.setModel(oModel); 
    }, 
    onPress: function(oEvent) { 
    var table = this.getView().byId("tableid"); 
    var items = table.getSelectedItems(); 
    for (var i = 0; i < items.length; i++) { 
     var data = new sap.m.ColumnListItem({ 
     cells: [new sap.m.Text({ 
      text: "new Row1" 
     }), new sap.m.Text({ 
      text: "new row1" 
     }), new sap.m.Text({ 
      text: "new row1" 
     }), new sap.m.Text({ 
      text: "new row1" 
     })] 
     }); 
     table.addItem(data); 
    } 
    }, 

<Table id="tableid" mode="MultiSelect" select="addRows"> 
    <columns> 
    <Column> 
     <Text text="column1" /> 
    </Column> 
    <Column> 
     <Text text="column2" /> 
    </Column> 
    <Column> 
     <Text text="column3" /> 
    </Column> 
    <Column> 
     <Text text="column4" /> 
    </Column> 
    </columns> 
</Table> 
<Button text="Edit" press="onPress" /> 

这里是我的输出图像

现在我想实现什么，

1. 我选择任何复选框。
2. 然后我会按Edit按钮。
3. 现在就按Edit按钮I want to add one more row below selected checkbox row.

所以我能做到这一点。

注意现在的新行的表

Answer 1

使用insertItem最后添加到指定索引插入项。

它需要两个参数即，要添加的项目以及要添加的项目。

因此，首先获取您想添加项目的项目的索引indexOfItem，然后使用该索引+1作为新项目的索引。

Here是演示。

Answer 2

如果您使用数据绑定，您应该绝对不是添加一个新的表行控制 - 相反，新的条目添加到您的模型节点：

编辑：更新我的回答：

onPress : function(oEvent) { 
    var oModel = this.getView().getModel();        // the model 
    var aRows = oModel.getProperty("/catalog/clothing/categories");  // array with all rows in the model 
    var oThisObj = oEvent.getSource().getBindingContext().getObject();  // the current object 
    var item  = { name: null, amount: null, currency: null, size: null } // an empty object 

    var index = $.map(aRows, function(obj, index) {       // get the index of the selected item in your array 
     if(obj === oThisObj) { 
      return index; 
     } 
    }) 

    aRows.splice(index, 0, item);           // add the item at the index 

    oModel.setProperty("/catalog/clothing/categories", aRows);    // store the array back to the model 
}