我创建了一个具有5列的SAP UI5表,其中表的其中一列将具有带有编辑图标的按钮。我尝试过如下:
<Table id="table2" visibleRowCount="5" rows="{
path: '/ProductCollection',
sorter: {path: 'serialId', descending: false}
}">
<columns>
<Column width="50px">
<m:Text text="S.No" />
<template>
<m:Text text="{serialId}" wrapping="false" />
</template>
</Column>
<Column width="200px">
<m:Text text="EmployeeName" />
<template>
<m:Text text="{employeeName}" wrapping="false" />
</template>
</Column>
<Column width="200px">
<m:Text text="EmployeeId" />
<template>
<m:Text text="{employeeId}" wrapping="false" />
</template>
</Column>
<Column width="200px">
<m:Text text="Age" />
<template>
<m:Text text="{age}" wrapping="false" />
</template>
</Column>
<Column width="200px">
<m:Text text="Email" />
<template>
<m:Text text="{email}" wrapping="false" />
</template>
</Column>
<Column hAlign="End" width="4rem" >
<m:Text text="Edit" />
<template>
<m:Button icon="sap-icon://edit" press="editRow" type="Reject"/>
</template>
</Column>
</columns>
<dragDropConfig>
<dnd:DropInfo
groupName="moveToTable2"
targetAggregation="rows"
dropPosition="Between"
drop="onDropTable2" />
<dnd:DragDropInfo
sourceAggregation="rows"
targetAggregation="rows"
dropPosition="Between"
dragStart="onDragStart"
drop="onDropTable2" />
</dragDropConfig>
</Table>
单击编辑按钮时,将打开一个对话框以及单击的行的数据。
我已经尝试使用以下功能编辑该行
我将打开一个包含当前值的对话框,以便在单击OK时进行更新。这是我的控制器:
editRow: function(oEvent) {
var oControl = oEvent.getSource();
var oItemPath = oControl.getBindingContext().getPath();
var oObject = this.byId("table2").getModel() .getProperty(oItemPath);
var editRecord = oEvent .getSource().getBindingContext() .getObject();
var editRecordRank = editRecord.Rank;
var oDialog1 = new Dialog({
title: "Wafer",
contentWidth: "40px",
contentHeight: "300px",
content: [
new sap.m.Text({
width: "100%",
text: "EMPid"
}),
new sap.m.FlexBox({
justifyContent: "Center",
items: [
new sap.m.Select("EmployeeEditId", {
width: "60%",
items: [
new sap.ui.core.Item("itemee11", { text: "33" }),
new sap.ui.core.Item("iteme12", {
text: "78"
}),
new sap.ui.core.Item("itemee13", {
text: "100"
}),
new sap.ui.core.Item("iteme14", {
text: "75"
}),
new sap.ui.core.Item("iteme15", {
text: "101"
})
]
})
]
}),
new sap.m.Text({ width: "100%", text: "EMPname" }),
new sap.m.FlexBox({
justifyContent: "Center",
items: [
new sap.m.Select("EmployeeNameEditId", {
width: "60%",
items: [
new sap.ui.core.Item("iteme1111", {
text: "test1"
}),
new sap.ui.core.Item("iteme1234", {
text: "test2"
}),
new sap.ui.core.Item("iteme1312", {
text: "test3"
})
]
})
]
}),
new sap.m.Text({ width: "100%", text: "age" }),
new sap.m.FlexBox({
justifyContent: "Center",
items: [
new sap.m.Select("AgeEditId", {
width: "60%",
items: [
new sap.ui.core.Item("iteme15211", { text: "22" }),
new sap.ui.core.Item("iteme136454", { text: "23" }),
new sap.ui.core.Item("iteme213754", { text: "33" }),
]
})
]
}),
new sap.m.Text({ width: "100%", text: "Email" }),
new sap.m.FlexBox({
justifyContent: "Center",
items: [
new sap.m.Select("EmailEditId", {
width: "60%",
items: [
new sap.ui.core.Item("iteme11411", { text: "[email protected]" }),
new sap.ui.core.Item("iteme34", { text: "[email protected]" }),
new sap.ui.core.Item("iteme314", { text: "[email protected]" })
]
})
]
})
],
beginButton: new Button({
type: ButtonType.Emphasized,
text: "Update",
press: function() {
var otab = this.byId("table2");
var rows = otab.getRows();
var rowsLength = otab.getBinding('rows').getLength();
var tableArr = [];
for ( var i = 0; i < rowsLength; i++ ) {
tableArr.push({
empId : rows[i].getCells()[0].getText(),
employeeName : rows[i].getCells()[1].getText(),
age: rows[i].getCells()[2].getText(),
email : rows[i].getCells()[3].getText(),
});
}
var employeeId= sap.ui.getCore().byId("empId ");
var empnameId = sap.ui.getCore().byId("employeeName ");
var ageId = sap.ui.getCore().byId("age");
var emailId = sap.ui .getCore().byId("email");
// data=oEvent.getSource
var componentText =empId.mAssociations.selectedItem;
var categoryText = empnameId.mAssociations.selectedItem;
var quantityText = ageId.mAssociations.selectedItem;
var mainCategoryText = emailId.mAssociations.selectedItem;
var cValue = sap.ui.getCore().byId(componentText) .mProperties.text;
var catValue = sap.ui.getCore().byId(categoryText).mProperties.text;
var qValue = sap.ui.getCore().byId(quantityText).mProperties.text;
var mValue = sap.ui.getCore().byId(mainCategoryText) .mProperties.text;
tableArr.map(function(item) {
if (item.empId==cValue){
item.empnameId = catValue;
item.ageId = qValue;
item.emailId = mValue;
}
return item; });
// var aContexts = sap.ui.getCore().byId("test");
var oModel = new sap.ui.model.json.JSONModel();
var oTable = this.byId("table2");
oModel.setData({ modelData: tableArr });
oTable.setModel(oModel);
oTable.bindRows("/modelData");
oDialog1.close();
}.bind(this)
}),
endButton: new Button({
text: "Close",
press: function() {
this.pressDialog.close();
}.bind(this)
})
});
oDialog1.open();
},
任何指导性链接或解决方案将大有帮助,TIA
缺少对话框的绑定。在该视图上将对话框添加为“从属”,以连接到该视图的模型生命周期。或尝试像这样绑定元素oDialog.bindElement(sPath)。