在sapui5表格行中隐藏空下拉框
这是一个包含三行的简单表,每行包含一个包含listItems的下拉框。但是第二行的下拉框是空的。我想隐藏空白<强> DROPBODBOS> <强>。我们是否可以隐藏该行的空下拉框,使其看起来只是一个简单的空白单元格。提前谢谢 这里有一张简单的桌子。在sapui5表格行中隐藏空下拉框,sapui5,Sapui5,这是一个包含三行的简单表,每行包含一个包含listItems的下拉框。但是第二行的下拉框是空的。我想隐藏空白 DROPBODBOS> 。我们是否可以隐藏该行的空下拉框,使其看起来只是一个简单的空白单元格。提前谢谢 这里有一张简单的桌子。 var demoTbl = new sap.ui.table.Table({ visibleRowCount: 10, width : "100%", selectionMode: sap.ui.table
var demoTbl = new sap.ui.table.Table({
visibleRowCount: 10,
width : "100%",
selectionMode: sap.ui.table.SelectionMode.Multi,
});
var systemColumn = new sap.ui.table.Column({
width:"12%",
label: new sap.ui.commons.Label({text: "Column Data", design:sap.ui.commons.LabelDesign.Bold}),
template: new sap.ui.commons.TextField({editable:false}).bindProperty("value", "name"),
sortProperty: "name",
filterProperty: "name",
sorted : false,
filtered : false
});
demoTbl.addColumn(systemColumn);
var inputListBox = new sap.ui.commons.ListBox();
inputListBox.bindAggregation("items","dropList",function(oId,oContext){
return new sap.ui.core.ListItem({
key: oContext.getProperty("id"),
text: oContext.getProperty("name")
});
});
var connectorIpColumn = new sap.ui.table.Column({
width:"12%",
label: new sap.ui.commons.Label({text: "Dropdown Data", design:sap.ui.commons.LabelDesign.Bold}),
template: new sap.ui.commons.DropdownBox({
"association:listBox" : inputListBox
})
});
demoTbl.addColumn(connectorIpColumn);
下面是数据-
var oData={
"dataList": [{
"id": 111,
"name": "Row1 Data",
"dropList": [
{"id": 1, "name": "Row1 dropDown Item1"},
{"id": 2, "name": "Row1 dropDown Item2"},
{"id": 3, "name": "Row1 dropDown Item3"},
{"id": 4, "name": "Row1 dropDown Item4"}
]
},
{
"id": 222,
"name": "Row2 Data",
"dropList": []
},
{
"id": 333,
"name": "Row3 Data",
"dropList": [
{"id": 8, "name": "Row3 dropDown Item1"},
{"id": 9, "name": "Row3 dropDown Item2"},
{"id": 10, "name": "Row3 dropDown Item3"}
]
}
]};
var mappingModel = new sap.ui.model.json.JSONModel({listData:oData});
sap.ui.getCore().setModel(mappingModel, "mappingModel");
demoTbl.setModel(mappingModel);
demoTbl.bindRows("/listData/dataList");
mappingModel.refresh(true);
var addSystemPage = new sap.m.Page("addSystemPageId", {
content:[demoTbl]
});
有许多方法可以读取表格的单元格,确定下拉值并显式设置可见性。我建议最好的办法是
var oData={
"dataList": [{
"id": 111,
"name": "Row1 Data",
"dropVis" : true,
"dropList": [
{"id": 1, "name": "Row1 dropDown Item1"},
{"id": 2, "name": "Row1 dropDown Item2"},
{"id": 3, "name": "Row1 dropDown Item3"},
{"id": 4, "name": "Row1 dropDown Item4"}
]
},
{
"id": 222,
"name": "Row2 Data",
"dropVis" : false,
"dropList": []
},
{
"id": 333,
"name": "Row3 Data",
"dropVis" : true,
"dropList": [
{"id": 8, "name": "Row3 dropDown Item1"},
{"id": 9, "name": "Row3 dropDown Item2"},
{"id": 10, "name": "Row3 dropDown Item3"}
]
}
]};
您可以看到json对象已被修改为获得一个属性dropVis,这可以基于dropList手动填充,并最终将该属性绑定到调用模板
var connectorIpColumn = new sap.ui.table.Column({
width:"12%",
label: new sap.ui.commons.Label({text: "Dropdown Data", design:sap.ui.commons.LabelDesign.Bold}),
template: new sap.ui.commons.DropdownBox({
visible : "{dropVis}",
"association:listBox" : inputListBox
})
});
可见性是直接绑定的,应该可以工作。您可以使用格式化程序根据dropList数组的长度切换可见性
template: new sap.ui.commons.DropdownBox({
visible: {
path: 'dropList',
formatter: function(aList) {
return aList ? !!aList.length : false;
}
}
});
手动维护属性以切换可见性确实不是最好的方法。是的,我是,只需要添加一个条件-模板:new sap.ui.commons.DropdownBox({visible:{path:'dropList',formatter:function(aList){if(aList!=null){return!!aList.length;}}}});谢谢然后结束讨论。