单击ColumnListItem中的图标时如何访问行和列数据 [英] How to access row and column data on click of an icon in ColumnListItem
问题描述
我有一个JS视图,其中正在创建一个sap.m.Table.它的列"绑定到JSONModel.它的项目"绑定到ODataModel.当我单击ColumnListItem中包含的图标时,我想访问行数据和列名.
I have a JS view in which I am creating a sap.m.Table. It's "columns" are bound to a JSONModel. It's "items" are bound to ODataModel. I want to access the row data and the column name when I click on an Icon contained in the ColumnListItem.
查看代码:
createContent : function(oController) {
var oTable = new sap.m.Table("table1", {
width: "auto",
noDataText: "Please add rows to be displayed!"
}).addStyleClass("sapUiResponsiveMargin");
oTable.bindAggregation("columns", "Periods>/periods", function(sId, oContext) {
var sColumnId = oContext.getObject().period;
return new sap.m.Column({
hAlign: "Center",
vAlign: "Middle",
header: new sap.m.Text({
text: sColumnId
})
});
});
oTable.bindItems("zStatus>/StatusSet", function(sId, oContext) {
var row = new sap.m.ColumnListItem(sId, {
type : "Inactive",
cells: [
new sap.ui.core.Icon({
src: "sap-icon://delete",
hoverColor: "red",
activeColor: "red",
press: [oController.onDeleteIconPress, oController]
}),
new sap.m.Text({
text: "{zStatus>Description}"
}),
new sap.ui.core.Icon(sId, {
src: {
path: "zStatus>Status1",
formatter: function(status) {
switch(status) {
case "R":
return "sap-icon://sys-cancel";
case "G":
return "sap-icon://sys-enter";
case "Y":
return "sap-icon://notification";
default:
return "sap-icon://sys-help";
}
}
},
size: "1.5em",
press: [oController.onStatusIconPress, oController]
}) ]
});
return oTable;
}
在我的控制器中,我创建一个数组,然后从中创建一个JSON模型"Periods",并将其设置为该视图.清单文件中定义了Odata模型"zStatus".
In my controller I create an array, then a JSON model "Periods" from it and set it to this view. Odata model "zStatus" is defined in manifest file.
控制器代码:
onInit : function() {
// array aPeriods is populated first then
var oPeriodsModel = new sap.ui.model.json.JSONModel();
oPeriodsModel.setData({
periods : aPeriods
});
this.getView().setModel(oPeriodsModel, "Periods");
},
onStatusIconPress : function(oEvent) {
// I can get the row data on icon press
// Problem 2: but how do I get the column name?
// I wanted to attach the column name to icon as customData but I could
// not access model attached to columns inside bindItems method
}
推荐答案
我设法自己解决了这个问题.
I managed to solve it myself.
在createContent中创建一个数组.在列的bindAggregation中用列ID填充它,然后在bindItems方法中使用此数组. 然后,我可以将customData传递给图标.
Created an array in createContent. Filled it with column IDs in bindAggregation of columns and then used this array in bindItems method. Then I can pass customData to icons.
这是代码-
createContent : function(oController) {
var aColumns = []; // array to store column ids
var columnIndex = 0; // index to track
//more code
// create table oTable
oTable.bindAggregation("columns", "/columns", function(sId, oContext) {
var sColumnId = oContext.getObject().period;
if (sColumnId === "DeleteIcon") {
// this is always my first column
columnIndex = 0;
return new sap.m.Column({
hlign : "Begin",
vAlign : "Middle",
width : "2em",
header : new sap.m.Text({
text : ""
})
});
} else {
// add column ids to array
aColumns[columnIndex++] = sColumnId;
return new sap.m.Column({
hlign : "Center",
vAlign : "Middle",
header : new sap.m.Text({
text : sColumnId
})
});
}
});
oTable.bindItems("/rows", function(sId, oContext) {
var row = new sap.m.ColumnListItem({
new sap.m.Text({
text: "{Name}"
}),
new sap.ui.core.Icon(sId, {
src: "sap-icon://sys-help"
size: "1.5em",
press: [oController.onStatusIconPress, oController],
customData : [
// use column ids here
new sap.ui.core.CustomData({key: "column", value: aColumns[0]})
]
}),
});
return row;
}
}
这篇关于单击ColumnListItem中的图标时如何访问行和列数据的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!