Question

这是一个包含三行的简单表，每行包含一个带有listItems的DropdownBox。但第二行中的DropdownBox为空。我想隐藏空白 DropdownBox 。我们可以隐藏该行中的空DropdownBox，以便它看起来只是一个简单的空白单元格。在此先感谢！

在这里，我有简单的表格。

    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]
    });

Answer 1

有很多方法可以读取表格的单元格并确定下拉值并明确设置可见性。我建议最好的方法是

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
     })
     });

可见性是直接绑定的，它应该有效。

Answer 2

您可以使用formatter根据dropList Array的长度切换可见性。

template: new sap.ui.commons.DropdownBox({
    visible: {
        path: 'dropList',
        formatter: function(aList) {
            return aList ? !!aList.length : false;
        }
    }
});

在sapui5表行中隐藏空DropdownBox

2 个答案: