【发布时间】：2020-03-06 09:34:11
【问题描述】：
我创建了一个包含 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: "a@gmail.com" }),
new sap.ui.core.Item("iteme34", { text: "b@hotmail.com" }),
new sap.ui.core.Item("iteme314", { text: "c@hotmail.com" })
]
})
]
})
],
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
【问题讨论】：
-
我会推荐几件事：不要用 JS 创建你的
Dialog。创建一个 XML 片段，加载该片段并将绑定上下文传输到您的新片段。另外，为什么所有东西都在Select中？如果只有一个值，您不能更改选择中的值？！。还有 getter 可以访问选定的项目，不要使用mAssociations属性，它可能随时更改。 -
我还有一些值，但没有放在这里，是的，我确实在寻找一个示例来执行此操作，我看过演示示例，它显示了多重编辑，这对我来说并不复杂一样理解
-
那么您当前的解决方案有什么问题？你有任何错误吗？
-
我无法使用当前解决方案更新行......
-
我已经更新了我刚刚尝试过的问题
标签： sapui5