將dyanmic數據綁定到SAPUI5表中的DropdownBox

Question

我想爲SAPUI5表中的每一行綁定動態下拉菜單。每行應該有行特定的數據 - 下拉菜單。這裏是三行的示例json。但是我無法爲每個下拉列表綁定行特定的數據。提前致謝！

在這裏，我有簡單的表格。

// Table goes here 
    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: "System", 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); 

的第1行的下拉列表綁定列表數據這裏 -

var inputListBox = new sap.ui.commons.ListBox(); 
    inputListBox.bindAggregation("items","/listData/dataList/0/dropList",function(oId,oContext){ 
     console.log(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": 5, "name": "Row2 dropDown Item1"}, 
       {"id": 6, "name": "Row2 dropDown Item2"}, 
       {"id": 7, "name": "Row2 dropDown Item3"} 
      ] 
     }, 
     { 
      "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({ 
     content:[demoTbl] 
    }); 

Answer 1

您必須爲ListBox模板提供聚合綁定路徑爲'dropList'。

inputListBox.bindAggregation("items","dropList",function(oId,oContext){ 
     return new sap.ui.core.ListItem({ 
      key: oContext.getProperty("id"), 
      text: oContext.getProperty("name") 
     }); 
});