在 SAPUI5 表中的每一列上添加排序功能答案

【问题标题】：Adding sort functionality on every column in SAPUI5 table在 SAPUI5 表中的每一列上添加排序功能
【发布时间】：2019-10-25 18:03:29
【问题描述】：

我想在表格的每一列上添加功能，单击该列会按某种顺序（升序/降序）对其进行排序。但是列上没有点击事件。每列上都应出现一个图标，单击该列应打开一个对话框，其中将给出排序选项

<Table id="schTableId" selectionChange="onTableRowPress" 
mode="SingleSelectMaster" growingScrollToLoad="true" growingThreshold="10"
            growing="true">
            <columns>
                <Column >
                    <Text text="Sales Order No." class="ABC"/>
                </Column>
                <Column >
                    <Text text="Creation Date" class="ABC"/>
                </Column>
                <Column minScreenWidth="Tablet" demandPopin="true">
                    <Text text="Requested Delivery Date" class="ABC"/>
                </Column>
                <Column minScreenWidth="Tablet" demandPopin="true">
                    <Text text="Sold-To-Party" class="ABC"/>
                </Column>
                <Column minScreenWidth="Tablet" demandPopin="true">
                    <Text text="Ship-To-Party" class="ABC"/>
                </Column>
                <Column minScreenWidth="Tablet" demandPopin="true" width="8em">
                    <Label design="Bold" text="Product"/>
                </Column>
                <Column minScreenWidth="Tablet" demandPopin="true">
                    <Text text="Quantity" class="ABC"/>
                </Column>
                <Column minScreenWidth="Tablet" demandPopin="true">
                    <Text text="TT No." class="ABC"/>
                </Column>
                <Column minScreenWidth="Tablet" demandPopin="true">
                    <Text text="Invoice No." class="ABC"/>
                </Column>
                <Column minScreenWidth="Tablet" demandPopin="true">
                    <Text text="Invoice Date" class="ABC"/>
                </Column>
                <Column minScreenWidth="Tablet" demandPopin="true">
                    <Text text="Bill Amount" class="ABC"/>
                </Column>
                <Column minScreenWidth="Tablet" demandPopin="true">
                    <Text text="Status" class="ABC"/>
                </Column>
            </columns>
            <items>
            </items>
        </Table>

【问题讨论】：

您要使用哪种类型的表？ - 网格表可用sapui5.hana.ondemand.com/#/entity/sap.ui.table.Table/sample/….
@MichałMajer 我不想在列之间进行垂直线划分。这就是我不使用网格表的原因。我正在使用 sap.ui.Table

标签： javascript xml sapui5

【解决方案1】：

您可以在 sap.m.Column 控件中使用“header”聚合（这是默认设置）。您可以将 HBox 放在那里，包括用于显示实际列标题的 Text 和一个带有排序图标的 Button，单击它会更改排序顺序并修改图标方向。

https://sapui5.netweaver.ondemand.com/sdk/#/api/sap.m.Column

【讨论】：