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

绑定第一行 - 下拉列表的列表数据 -

    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模板提供聚合绑定路径作为＆＃39; dropList＆＃39;。

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

将dyanmic数据绑定到SAPUI5表中的DropdownBox

1 个答案: