在sapui5表格行中隐藏空的DropdownBox

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对象已被修改，以获得一个属性您根据dropList最后结合该属性调用模板dropVis这可以手工填写您

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

您可以使用格式基于dropList数组的长度切换可见的。

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