答案 0 :(得分:3)
首先确保你don't mix sap.ui.commons and sap.m - 无论如何......
您正在尝试从表中删除一行,该表从JSONModel获取其数据。为了安全起见,你必须找到正确的"行数据"在删除它之前在模型中。您不能只使用表的选定索引,因为此索引与相应模型数据的索引不相关!因此,您需要做的是使用表API从属于所选行的模型中获取数据。之后你必须为这个"数据"找到正确的索引。在模型中,即通过循环模型数据并比较唯一标识符(在我们的例子中是OrderID)或使用一些更智能/更快的算法......一旦获得数据,只需将其从模型中删除...
这是一个工作示例,甚至可以用于排序(jsbin)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Remove row from Table with JSONModel in SAPUI5 | nabisoft</title>
<script src="https://openui5.hana.ondemand.com/resources/sap-ui-core.js"
id="sap-ui-bootstrap"
data-sap-ui-theme="sap_bluecrystal"
data-sap-ui-libs="sap.ui.table,sap.m"
data-sap-ui-bindingSyntax="complex"
data-sap-ui-compatVersion="edge"
data-sap-ui-preload="sync"></script>
<!-- use "sync" or change the code below if you have issues -->
<script>
var oTable, oModel;
oTable = new sap.ui.table.Table({
selectionMode: sap.ui.table.SelectionMode.Single,
columns: [
new sap.ui.table.Column({
label: new sap.m.Label({text: "Order ID"}),
template: new sap.m.Input({value: "{OrderID}"}),
sortProperty : "OrderID"
}),
new sap.ui.table.Column({
label: new sap.m.Label({text:"Customer ID"}),
template: new sap.m.Input({value: "{CustomerID}"}),
sortProperty : "CustomerID"
})
]
});
oModel = new sap.ui.model.json.JSONModel([
{OrderID:10248,CustomerID:"VINET"},{OrderID:10249,CustomerID:"TOMSP"},{OrderID:10250,CustomerID:"HANAR"},
{OrderID:10251,CustomerID:"VICTE"},{OrderID:10252,CustomerID:"SUPRD"},{OrderID:10253,CustomerID:"HANAR"},
{OrderID:10254,CustomerID:"CHOPS"},{OrderID:10255,CustomerID:"RICSU"},{OrderID:10256,CustomerID:"WELLI"},
{OrderID:10257,CustomerID:"HILAA"},{OrderID:10258,CustomerID:"ERNSH"},{OrderID:10259,CustomerID:"CENTC"},
{OrderID:10260,CustomerID:"OTTIK"},{OrderID:10261,CustomerID:"QUEDE"},{OrderID:10262,CustomerID:"RATTC"},
{OrderID:10263,CustomerID:"ERNSH"},{OrderID:10264,CustomerID:"FOLKO"},{OrderID:10265,CustomerID:"BLONP"},
{OrderID:10266,CustomerID:"WARTH"},{OrderID:10267,CustomerID:"FRANK"},{OrderID:10268,CustomerID:"GROSR"},
{OrderID:10269,CustomerID:"WHITC"},{OrderID:10270,CustomerID:"WARTH"},{OrderID:10271,CustomerID:"SPLIR"},
{OrderID:10272,CustomerID:"RATTC"},{OrderID:10273,CustomerID:"QUICK"},{OrderID:10274,CustomerID:"VINET"},
{OrderID:10275,CustomerID:"MAGAA"},{OrderID:10276,CustomerID:"TORTU"},{OrderID:10277,CustomerID:"MORGK"},
{OrderID:10278,CustomerID:"BERGS"},{OrderID:10279,CustomerID:"LEHMS"},{OrderID:10280,CustomerID:"BERGS"},
{OrderID:10281,CustomerID:"ROMEY"},{OrderID:10282,CustomerID:"ROMEY"},{OrderID:10283,CustomerID:"LILAS"},
{OrderID:10284,CustomerID:"LEHMS"},{OrderID:10285,CustomerID:"QUICK"},{OrderID:10286,CustomerID:"QUICK"},
{OrderID:10287,CustomerID:"RICAR"},{OrderID:10288,CustomerID:"REGGC"},{OrderID:10289,CustomerID:"BSBEV"},
{OrderID:10290,CustomerID:"COMMI"},{OrderID:10291,CustomerID:"QUEDE"},{OrderID:10292,CustomerID:"TRADH"},
{OrderID:10293,CustomerID:"TORTU"},{OrderID:10294,CustomerID:"RATTC"},{OrderID:10295,CustomerID:"VINET"},
{OrderID:10296,CustomerID:"LILAS"}
]);
oTable.setModel(oModel);
oTable.bindRows("/");
oTable.placeAt("tableContent");
new sap.m.Button({
text: 'Delete',
press : function() {
var idx, oRow, oRowData, oData, oRemoved;
idx = oTable.getSelectedIndex();
if (idx !== -1) {
// get the selected row data from the (json) model
oRow = oTable.getRows()[idx];
oRowData = oRow.getBindingContext().getObject();
// now we have to loop over the JSONModel to find the right entry
oData = oModel.getData();
for (i=0; i<oData.length; i++){
if(oData[i].OrderID === oRowData.OrderID){
// we found the right entry, now remove it from the model
oRemoved = oData.splice(i, 1);
oModel.refresh();
sap.m.MessageToast.show(JSON.stringify(oRemoved[0]) + 'is removed');
return;
}
}
} else {
sap.m.MessageToast.show('Please select a row');
}
}
}).placeAt('btnContent');
</script>
</head>
<body class="sapUiBody">
<div id="btnContent"></div>
<div id="tableContent"></div>
</body>
</html>
&#13;