【发布时间】:2017-02-13 15:58:52
【问题描述】:
我已经熟悉 OpenUI5 好几个星期了,而且我一直面临新的问题,比如我现在提出的问题。像往常一样,我正确地完成了我的作业——寻找解决方案、文档、类似的线程等。
我想要实现的目标:我想在sap.ui.table.Table 的一列中显示sap.m.ComboBox,并将其绑定到当前行的相应值。他们应该能够通过选择更改来更改特定行的值。
到目前为止我的进展是什么:我正在使用标准的 $.ajax();调用来填充这样的模型:
oModel = new sap.ui.model.json.JSONModel();
oModel.setData(dataToShow); // dataToShow being an array of entities
为简单起见,让dataToShow 中的每个实体如下所示:
{
itemID: '123',
state: 1 // state is an int column in the database
}
所以每个实体都有一个int 类型的属性“状态”。
我像这样创建一个普通的 oTable:oTable = new sap.ui.table.Table({...});
“itemID”列的定义如下:
oTable.addColumn(new sap.ui.table.Column({
label: new sap.ui.commons.Label({ text: "Number of item" }),
template: new sap.ui.commons.TextView({ text: "{itemID}" }),
sortProperty: "itemID", // https://sapui5.netweaver.ondemand.com/sdk/test-resources/sap/ui/table/demokit/Table.html#__2
filterProperty: "itemID",
width: gridTestColWidth
}));
对于第二列,我尝试在其中放置一个 ComboBox,如下所示:
// first, hard-code (for now) the list of possible items
var cbStateItems = [
{
Code: 0,
//Code: '0', // I tried to set the number as string, which didn't affect the situation in any way
Name: "test1",
AdditionalText: "test11"
},
{
Code: 1,
Name: "test2",
AdditionalText: "test22"
},
{
Code: 2,
Name: "test3",
AdditionalText: "test33"
}
];
var cbStateModel = new sap.ui.model.json.JSONModel({ items: cbStateItems });
var cbStateTemplate = new sap.ui.core.ListItem({
key: "{Code}",
text: "{Name}",
additionalText: "{AdditionalText}"
});
var cbState = new sap.m.ComboBox({
// here, all commented lines - I tried to uncomment one or couple of them at a time in different groups of uncommented lines to test (first, first and second, etc.)
//text: '{state}',
//selectedKey: '{state}',
items: {
path: '/items',
template: cbStateTemplate,
//selectedItemId: '{state}',
templateShareable: false
},
showSecondaryValues: true,
//selectedItemId: '{state}',
//selectedKey: '{state}',
//key: '{state}',
//value: "{Name}",
selectedKey: function (key) {// here, I thought, that maybe I can implement the binding manually. I know, that this is a prop of type string, but thought, that I could pass it a function, that returns a string - does not get called
debugger;
if (typeof (key) !== 'undefined' && key !== null) {
return cbStateItems[key].Name;
} else {
return '0';
}
},
selectionChange: function (oControlEvent) {
var gewrgter = oModel;
debugger;
}
}); //.bindProperty("selectedKey", "state"); //.bindProperty("selectedItemId", "state"); none of those work
debugger;
cbState.setModel(cbStateModel);
var cbStateCol = new sap.ui.table.Column({
label: new sap.ui.commons.Label({ text: "State" }),
template: cbState,
width: gridTestColWidth
});
oTable.addColumn(cbStateCol);
最后,我调用oTable.setModel(oModel); 在网格中显示数据。
我从数据库中获取的数据在所有实体的“状态”列中包含值 null、0、1 或 2。
主要问题: oTable 中的所有行都没有在 State 列和其中的 ComboBox 中选择任何内容,尽管它们都有一个非空值(实际上,只有第一个数据库表中的行在State列中的值为null)
每次我测试这个(不同的行未注释),我看到数据成功加载到 oTable 后的两种情况之一:
- 当我选择更改某一行的值时,它的“名称”属性的值在 ComboBox 控件的文本框部分显示为文本。但是当我向下滚动行时,看起来这个值“卡”在第三行。当我滚动一次(一次 4 行)时,selectedValue(让它成为'test33')离开该行,我在其中进行了 selectionChange 并成为此之后第 4 行的 ComboBox 中的“选定”值.如果我再次滚动,这个值“test33”会“向下移动”另外 4 行。当我展开 ComboBox 时,我看到突出显示的项目就是我选择的项目。
- 如果我取消注释,例如,此行:
selectedItemId: '{State}',进行 selectionChange,ComboBox 的文本框部分不会显示任何内容,尽管所选项目突出显示为“已选择”。
我现在完全糊涂了,因为我期待 selectedItemId: '{State}' 或 selectedKey: '{State}' 将为我完成“绑定”工作,但他们似乎没有。
提前感谢您的帮助和建议!
【问题讨论】: