在sapui5表格行中隐藏空下拉框

在sapui5表格行中隐藏空下拉框,sapui5,Sapui5,这是一个包含三行的简单表,每行包含一个包含listItems的下拉框。但是第二行的下拉框是空的。我想隐藏空白 DROPBODBOS> 。我们是否可以隐藏该行的空下拉框,使其看起来只是一个简单的空白单元格。提前谢谢 这里有一张简单的桌子。 var demoTbl = new sap.ui.table.Table({ visibleRowCount: 10, width : "100%", selectionMode: sap.ui.table

这是一个包含三行的简单表,每行包含一个包含listItems的下拉框。但是第二行的下拉框是空的。我想隐藏空白<强> DROPBODBOS> <强>。我们是否可以隐藏该行的空下拉框,使其看起来只是一个简单的空白单元格。提前谢谢

这里有一张简单的桌子。

    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;}}}});谢谢然后结束讨论。