sap.ui.table 带有页脚选项的列

问题描述 投票：0回答：1

我有一个 sap.ui.table，其中包含 40 多个要在 UI 中显示的列。其中，几列代表金额。我试图在每列的底部显示总值，但我还没有找到这样做的选项。虽然 sap.m.column 有页脚聚合，但 sap.ui.table.column 没有。有其他方法可以实现此目的吗？

sapui5 sap-fiori
1个回答
0
投票

可以修复最后一行并输入自己的行。 （当然，该值应该来自后端，而不是手动计算）

<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta charset="utf-8">

    <title>Total Row</title>

    <script src="https://ui5.sap.com/resources/sap-ui-core.js"
                                    id="sap-ui-bootstrap"
                                    data-sap-ui-libs="sap.m, sap.ui.table"
                                    data-sap-ui-theme="sap_fiori_3"
                                    data-sap-ui-compatVersion="edge"></script>
    <!-- only load the main library "sap.m" and the Fiori 3 theme -->

    <script>
        var oTable = new sap.ui.table.Table().placeAt("content");

        var aTableData = {
            "columns": {
                "VALUES": [{
                    "LABEL": "Transaction Number",
                    "TEMPLATE": "TRANSACTION_NUM",
                    "DATATYPE": "NUMC",
                    "DECIMALS": "000000",
                    "REFFIELD": ""
                },
                    {
                        "LABEL": "Total Amt Incl VAT",
                        "TEMPLATE": "INVOICEAMTINCLUDINGVAT",
                        "DATATYPE": "CURR",
                        "DECIMALS": "000002",
                        "REFFIELD": ""
                    }]
            },
            "rows": [{
                "TRANSACTION_NUM": "000000000001",
                "INVOICEAMTINCLUDINGVAT": 1200,
            },
                {
                    "TRANSACTION_NUM": "000000000002",
                    "INVOICEAMTINCLUDINGVAT": 34,
                }

            ]
        };
        var oFooterTotal = $.extend(true, {}, aTableData.rows[0]);
        aTableData.rows.push(oFooterTotal);
        var lastRow = aTableData.rows.length - 1;
        aTableData.columns.VALUES.forEach(function (oColumn, iIndexCol) {
            if (oColumn.DATATYPE === "CURR") {
                oFooterTotal[oColumn.TEMPLATE] = 0;
                aTableData.rows.forEach(function (oRow, iIndexRow) {
                    if (iIndexRow !== lastRow) {
                        oFooterTotal[oColumn.TEMPLATE] += parseInt(oRow[oColumn.TEMPLATE]);
                    }
                })
            }
            else {
                oFooterTotal[oColumn.TEMPLATE] = "";
            }
        });

        oTable.setModel(new sap.ui.model.json.JSONModel(aTableData.rows));
        oTable.setVisibleRowCountMode("Fixed");
        oTable.setVisibleRowCount(aTableData.rows.length);
        oTable.setFixedBottomRowCount(1);

        Object.keys(aTableData.rows[0]).forEach(function (key) {
            oTable.addColumn(new sap.ui.table.Column({
                name: key,
                label: new sap.m.Label({
                    text: key
                }),
                template: new sap.m.Label().bindProperty("text", key),
            }));
        });

        oTable.bindAggregation("rows", {
            path: "/"
        });

    </script>
</head>
<body id="content" class="sapUiBody">
</body>
</html>

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.