在现有表

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
}