SAPUI5：如何向 ui.table 的列菜单添加自定义功能？

Question

我想让我的用户有机会在数据加载到 table 后重新格式化 table 单元格。我认为一个巧妙的方法是将功能添加到列菜单。因此，当单击 table 列时，菜单会附加标准 "filtering, sorting" 但还有一行名为 "formatting" 的行提供了一些选项（例如，将数字单元格从 55555,55 格式化为55.555,55)

不幸的是，我找不到向我的列菜单添加新行的方法。我的排序过滤是这样添加的：

oTable.bindColumns("/columns", function(index, context) {
    var columnName = context.getObject().columnId;
    return new sap.ui.table.Column({
        label:columnName,
        template: columnName,
        sortProperty: columnName,
        filterProperty: columnName,
    });
});

如何向列菜单添加新的 lines/functionalities？

更新

这是我的 table 在 xml 视图中的样子：

 <table:Table id="uploadData" visibleRowCountMode="Auto" rowSelectionChange="tableRowSelectionChange" enableCellFilter="true" fixedColumnCount="0" enableBusyIndicator="true" customData="{Type: 'sap.ui.core.CustomData', key:'table-style-type', value:'custom-styled',  writeToDom: true }">
        <table:extension>
                <m:Button icon="sap-icon://download" press="onDataExportXLS" align="Right" />
        </table:extension>

        <table:columns>
                <!-- Columns dynamically created in controller -->
        </table:columns>
        <table:rows>
                <!-- Rows created in controller -->
        </table:rows>
</table:Table>

Answer 1

sap.ui.table.Column 有一个叫做 menu 的集合就是为了这个。它接受单击列时显示的任何自定义菜单项。此聚合采用 sap.ui.unified.Menu 控制。

在MenuItem聚合的select函数中，可以编写函数来处理选中菜单项时需要做的事情

sap.ui.table.Column documentation

sap.ui.unified.Menu documentation

在this sample here and its code here中查看，点击数量栏，你会看到一个我的自定义菜单项

XML、

中的代码片段

<Column id="quantity" width="6rem" hAlign="End" sortProperty="Quantity">
    <m:Label text="Quantity" />
    <template>
        <m:Label text="{ path: 'Quantity', type: 'sap.ui.model.type.Integer'}" />
    </template>
    <menu>
        <u:Menu ariaLabelledBy="quantity">
            <u:items>
                <u:MenuItem text="My custom menu entry" select="onQuantityCustomItemSelect" />
                <u:MenuItem text="Sort" select="onQuantitySort" icon="sap-icon://sort" />
            </u:items>
        </u:Menu>
    </menu>
</Column>

JS中的代码，

var oColumn = new sap.ui.table.Column({
    label: "Some column Name",
    menu: new sap.ui.unified.Menu({
        items: [new sap.ui.unified.MenuItem({
            text: "My custom menu",
            select: function (oEvent) {
                pressEventOnItem(oEvent);
            })
        ]
    })
})

SAPUI5：如何向 ui.table 的列菜单添加自定义功能？

SAPUI5: How to add custom functionality to column menu of ui.table?

data-binding

formatting

uitableview

number-formatting

sapui5