如何在第一个下拉列表的基础上填充第二个下拉列表';s在sapui5中的输入
我的代码是如何在第一个下拉列表的基础上填充第二个下拉列表';s在sapui5中的输入,sapui5,Sapui5,我的代码是 var oItemsData = { items: [ { text: "abc", text1: "opq"}, { text: "abc", text1: "nhm"}, { text: "def", text1: "rst" }, { text: "ghe", text1: "uvw" },
var oItemsData = {
items: [
{ text: "abc", text1: "opq"},
{ text: "abc", text1: "nhm"},
{ text: "def", text1: "rst" },
{ text: "ghe", text1: "uvw" },
{ text: "ijk", text1: "xyz" },
{ text: "def", text1: "uhg" },
{ text: "lmn", text1: "abc" }
]
};
var oItemsModel = new sap.ui.model.json.JSONModel(oItemsData);
sap.ui.getCore().setModel(oItemsModel, "items");
new sap.ui.commons.Label({text:"FirstOne"}),
new sap.ui.commons.DropdownBox({value:"",required: true,
items: {
path: "items>/items",
template: new sap.ui.core.ListItem({
text: { path: "items>text" }//how to filter
})
}
}),
new sap.ui.commons.Label({text:"SecondOne"}),
new sap.ui.commons.DropdownBox({value:"",required: true,
items: {
//populate on the basis of 1st one's input
})
}
})
[ { text: 'abc',
text1: [ 'opq', 'nhm' ] },
{ text: 'def',
text1: [ 'rst', 'uhg' ] },
{ text: 'ghe', text1: [ 'uvw' ] },
{ text: 'ijk', text1: [ 'xyz' ] },
{ text: 'lmn', text1: [ 'abc' ] } ]
我有两个问题。
1.如何筛选出第一个下拉列表中的多个条目?
2.如何根据第一个输入填充第二个列表?您有两个下拉列表,第二个列表中的值取决于第一个列表。数据有点杂乱无章,给您带来了第一个列表的重复数据消除问题和第二个列表的匹配问题
[ { text: 'abc',
text1: [ 'opq', 'nhm' ] },
{ text: 'def',
text1: [ 'rst', 'uhg' ] },
{ text: 'ghe', text1: [ 'uvw' ] },
{ text: 'ijk', text1: [ 'xyz' ] },
{ text: 'lmn', text1: [ 'abc' ] } ]
你可以考虑通过清理数据来避免这些问题,以便更好地符合你的目的。< /P>
[ { text: 'abc',
text1: [ 'opq', 'nhm' ] },
{ text: 'def',
text1: [ 'rst', 'uhg' ] },
{ text: 'ghe', text1: [ 'uvw' ] },
{ text: 'ijk', text1: [ 'xyz' ] },
{ text: 'lmn', text1: [ 'abc' ] } ]
这里有一个例子(在火车上的安卓平板电脑上,所以我现在无法完全测试它)
[ { text: 'abc',
text1: [ 'opq', 'nhm' ] },
{ text: 'def',
text1: [ 'rst', 'uhg' ] },
{ text: 'ghe', text1: [ 'uvw' ] },
{ text: 'ijk', text1: [ 'xyz' ] },
{ text: 'lmn', text1: [ 'abc' ] } ]
步骤1:根据需要消除重复并组织:
var organised = oItemsData.items.reduce(function(m, i) {
var l = m[i.text] || [];
l.push(i.text1);
m[i.text] = l;
return m;
}, {});
[ { text: 'abc',
text1: [ 'opq', 'nhm' ] },
{ text: 'def',
text1: [ 'rst', 'uhg' ] },
{ text: 'ghe', text1: [ 'uvw' ] },
{ text: 'ijk', text1: [ 'xyz' ] },
{ text: 'lmn', text1: [ 'abc' ] } ]
这将导致如下结果:
{ abc: [ 'opq', 'nhm' ],
def: [ 'rst', 'uhg' ],
ghe: [ 'uvw' ],
ijk: [ 'xyz' ],
lmn: [ 'abc' ] }
[ { text: 'abc',
text1: [ 'opq', 'nhm' ] },
{ text: 'def',
text1: [ 'rst', 'uhg' ] },
{ text: 'ghe', text1: [ 'uvw' ] },
{ text: 'ijk', text1: [ 'xyz' ] },
{ text: 'lmn', text1: [ 'abc' ] } ]
步骤2:创建更适合手头任务的数据结构,并在模型中设置的数据中使用该结构:
oItemsData.items = Object.keys(organised).map(function(key) {
return {
text: key,
text1: organised[key]
};
})
[ { text: 'abc',
text1: [ 'opq', 'nhm' ] },
{ text: 'def',
text1: [ 'rst', 'uhg' ] },
{ text: 'ghe', text1: [ 'uvw' ] },
{ text: 'ijk', text1: [ 'xyz' ] },
{ text: 'lmn', text1: [ 'abc' ] } ]
为oItemsData.items
创建的结构如下所示:
[ { text: 'abc',
text1: [ 'opq', 'nhm' ] },
{ text: 'def',
text1: [ 'rst', 'uhg' ] },
{ text: 'ghe', text1: [ 'uvw' ] },
{ text: 'ijk', text1: [ 'xyz' ] },
{ text: 'lmn', text1: [ 'abc' ] } ]