SAPUI5：如何借助 MultiComboBox 实现菜单

Question

我必须实现以下菜单： Menu

我决定使用此菜单：MultiComboBox：

<MultiComboBox items="{modelExample>/}" >  //Model with a Title and Options
    <core:Item text="{modelExample>option}"/>
</MultiComboBox>

问题

代码确实展示了所有选项，还不知道如何将标题放在选项上方来实现这种显示。我试过的方法：Link- 没有用
如何为 MultiComboBox 添加新列。
如果我想在控制器的帮助下添加一个新的 ListItem，它看起来是这样的：

var l = new sap.ui.core.ListItem("ID"); var label = new sap.m.Label(); label.setText("Hallo Welt"); l.addCell(label); //Cell isn't supported -> those Error MultiComboBox.addItem(l);
Cell。 -> 我怎样才能将带有标题和所有其他选项的 cell/w/e 添加到 ListItem -> 而不是 MultiComboBox.addItem(l) ?

编辑： Model

Answer 1

"Tile" 是排序器或更好 "group"

<MultiComboBox
    selectionChange="handleSelectionChange"
    selectionFinish="handleSelectionFinish"
    width="500px"
    items="{
        path: '/ProductCollection',
        sorter: {
            path: 'SupplierName',
            descending: false,
            group: true
        },
        groupHeaderFactory: '.getGroupHeader'
    }">
    <core:Item key="{ProductId}" text="{Name}" />
</MultiComboBox>

例如.. 它将组合框中具有相同供应商名称的所有产品分组。我不知道你的模型看起来如何，但用一个组扩展它并在分拣机上使用它

并且在您的控制器中，您还需要提及函数

getGroupHeader: function (oGroup) {
        return new SeparatorItem( {
            text: oGroup.key
        });
    }

例如您的型号：

{
    "ProductCollection": [
        {
            "ProductId": "HT-1000",
            "Category": "Laptops",
            "MainCategory": "Computer Systems",
            "TaxTarifCode": "1",
            "SupplierName": "Very Best Screens",
            "WeightMeasure": 4.2,
            "WeightUnit": "KG",
            "Description": "Notebook Basic 15 with 2,80 GHz quad core, 15\" LCD, 4 GB DDR3 RAM, 500 GB Hard Disc, Windows 8 Pro",
            "Name": "Notebook Basic 15",
            "DateOfSale": "2017-03-26",
            "ProductPicUrl": "https://openui5.hana.ondemand.com/test-resources/sap/ui/documentation/sdk/images/HT-1000.jpg",
            "Status": "Available",
            "Quantity": 10,
            "UoM": "PC",
            "CurrencyCode": "EUR",
            "Price": 956,
            "Width": 30,
            "Depth": 18,
            "Height": 3,
            "DimUnit": "cm"
        },
        {
            "ProductId": "HT-1001",
            "Category": "Laptops",
            "MainCategory": "Computer Systems",
            "TaxTarifCode": "1",
            "SupplierName": "Very Best Screens",
            "WeightMeasure": 4.5,
            "WeightUnit": "KG",
            "Description": "Notebook Basic 17 with 2,80 GHz quad core, 17\" LCD, 4 GB DDR3 RAM, 500 GB Hard Disc, Windows 8 Pro",
            "Name": "Notebook Basic 17",
            "DateOfSale": "2017-04-17",
            "ProductPicUrl": "https://openui5.hana.ondemand.com/test-resources/sap/ui/documentation/sdk/images/HT-1001.jpg",
            "Status": "Available",
            "Quantity": 20,
            "UoM": "PC",
            "CurrencyCode": "EUR",
            "Price": 1249,
            "Width": 29,
            "Depth": 17,
            "Height": 3.1,
            "DimUnit": "cm"
        },

你看"SupplierName":"Very Best Screens"

因此，如果您有 10 个带有 "SupplierName" 的项目："Very Best Screens"，它将分组在 Very Best Screens 下。如果您在 "tile1" 下有 1000 件物品，那么您有 Tile 1

SAPUI5：如何借助 MultiComboBox 实现菜单

SAPUI5: How to realize a Menu with the help of MultiComboBox

javascript

xml

model-view-controller

combobox

sapui5