如何使用sap.ui.table实现各数值列的总和汇总展示

适用范围 #

• 仅依赖原生sap.ui.table组件，无需引入其他扩展控件
• 适配SAPUI5 1.78及以上所有官方维护版本，无废弃API调用

实现逻辑 #

通过sap.ui.table原生支持的fixedBottomRowCount配置占用底部固定行作为合计区域，绑定表格updateFinished事件在数据加载、变更后自动计算各数值列总和，写入底部固定行展示。

代码示例 #

视图层（XML） #

<sap.ui.table:Table 
    id="businessTable"
    rows="{/businessData}"
    visibleRowCountMode="Auto"
    fixedBottomRowCount="1"
    updateFinished=".handleTableUpdateFinish">
    <sap.ui.table:columns>
        <sap.ui.table:Column>
            <Label text="业务项"/>
            <template><Text text="{itemName}"/></template>
        </sap.ui.table:Column>
        <sap.ui.table:Column>
            <Label text="订单量"/>
            <template><Text text="{orderCount}"/></template>
        </sap.ui.table:Column>
        <sap.ui.table:Column>
            <Label text="交易金额"/>
            <template><Text text="{tradeAmount}"/></template>
        </sap.ui.table:Column>
    </sap.ui.table:columns>
</sap.ui.table:Table>

控制层（JS） #

handleTableUpdateFinish: function(oEvent) {
    const oTable = this.byId("businessTable");
    const oModel = oTable.getModel();
    const aRowContexts = oTable.getBinding("rows").getContexts();
    // 可动态遍历列模板的绑定路径，自动识别数值字段，无需手动配置
    const aNumberFields = ["orderCount", "tradeAmount"];
    const oSumData = {
        itemName: "*合计"
    };

    // 累加计算所有数值列总和
    aRowContexts.forEach(oCtx => {
        const oRowData = oCtx.getObject();
        aNumberFields.forEach(sField => {
            oSumData[sField] = (oSumData[sField] || 0) + (parseFloat(oRowData[sField]) || 0);
        });
    });

    // 写入底部固定行
    const oSumRow = oTable.getFixedBottomRows()[0];
    oModel.setProperty("/_internalSumRow", oSumData);
    oSumRow.setBindingContext(new sap.ui.model.Context(oModel, "/_internalSumRow"));
}

补充说明 #

• 表格触发过滤、排序、刷新操作后，updateFinished事件会自动触发，合计值同步更新，无需额外绑定监听
• 可通过自定义CSS修饰合计行样式，比如设置字体加粗、背景色高亮，和普通数据行做视觉区分
• 如果需要支持多维度合计（比如同时展示求和、平均值），可调整fixedBottomRowCount配置占用更多底部行，分别写入对应计算结果

内容的提问来源于stack exchange，提问作者Meriellen