Sapui5 将新项目添加到表/列表中

我有一个用XML编写的片段/视图，其中包含一个简单的表，其中包含一些列和一个ColumnListItem：

该按钮用于向表中添加新的ColumnListItem。
我想我应该在控制器中编写

onAddButton

函数，但我不知道从哪里开始

目前，我的控制器如下所示：

sap.ui.define([
“sap/ui/core/mvc/Controller”，
“sap/m/ColumnListItem”，
“sap/m/Text”，
“sap/m/TextArea”，
“sap/m/Input”，
“sap/m/DatePicker”
]，函数（控制器、列列表项、文本、文本区域、输入、日期选择器）{
“严格使用”；
返回控制器。扩展（“…”{
ONADD按钮：功能（oEvent）{
var columnListItemNewLine=新ColumnListItem({
单元格：[
新文本({
案文：“1”
}),
新文本区({
值：“senf”，
行：“6”，
宽度：“30%”
}),
新输入({
键入：“文本”，
占位符：“bla”
}),
新输入({
键入：“文本”，
占位符：“bla2”
}),
新日期选择器({
占位符：“bla3”
}),
新日期选择器({
占位符：“bla4”
})
]
});
此._oTable.addItem（columnListItemNewLine）；
}
});
});

我很确定有比我的方法更好的方法

请尝试下面的代码

将数据集合绑定到表的聚合

当用户单击“添加”时，将新条目添加到模型中（而不是直接添加到UI中）

由于聚合绑定，UI5将为您创建一个新的ColumnListItem，，并且您没有破坏MVC模式。以下是一些使用..的示例：

v2.ODataModel

• 调用并稍后

  submitChanges

  将其发送到后端
• 演示：（点击添加按钮创建一个新的“航班”）
• 文件：

v4.ODataModel

• 请参阅文档主题

JSONModel

sap.ui.getCore（）.attachInit（（）=>sap.ui.require([
“sap/ui/core/mvc/XMLView”，
“sap/ui/model/json/JSONModel”，
]，（XMLView，JSONModel）=>XMLView.create({
定义：`
`,
模型：新的JSONModel（[]），
})。然后（view=>view.placeAt（“内容”））；
AddItemPress函数（事件）{
const model=event.getSource（）.getModel（）；
model.setProperty（“/”，model.getProperty（“/”）.concat({
col1:“新富”，
col2:“纽巴”，
}));
}

可能重复的有没有办法添加ColumnListItem删除@波希恩Hoffmann@Ren当然，方法是一样的；通过公共API而不是UI操纵模型。对于V2 ODataModel，从单击的ColumnListItem上下文获取实体路径，将其传递给模型的

delete

方法。对于JSONModel，创建目标集合的副本，删除要删除的条目，然后将缩减后的集合传递给

setProperty

。无论哪种方式，绑定都会为您自动更新UI。

onAddButton: function(oEvent){
        var columnListItemNewLine = new sap.m.ColumnListItem({
            cells:[
                new sap.m.Text({text: "1"}),
                new sap.m.TextArea({value: "senf", rows: "6", width: 
                "30%"}),
                new sap.m.Input({type: "text", placeholder: "bla"}),
                new sap.m.Input({type: "text", placeholder: "bla2"}),
                new sap.m.DatePicker({placeholder: "bla3"}),
                new sap.m.Datepicker({placeholder: "bla4"})
                ]
        });
        this._oTable.removeAllItems();
        this._oTable.addItem(columnListItemNewLine);
    }