在現有表格中添加新行

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 
}