SAPUI5：如何在表中显示行索引答案

【问题标题】：SAPUI5: How to display row index in tableSAPUI5：如何在表中显示行索引
【发布时间】：2017-05-03 12:23:50
【问题描述】：

我是 SAPUI5 的新手，我有任务在表 (sap.ui.table.Table) 中显示行索引（连续编号）。例如，我在表中有这些数据：

Dente Al
Friese Andy
Mann Anita

等等..

我希望它有带有行索引的列，（即使行被过滤/排序，最好从 1 计数到 3）：

1 Dente Al
2 Friese Andy
3 Mann Anita

是否有任何 UI 组件或一些渲染回调或类似的东西可以帮助我以 SAPUI5 方式解决这个问题？

下面是代码示例：

<!DOCTYPE html >
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta charset="utf-8">
</head>
<script id="sap-ui-bootstrap"
    src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js"
    data-sap-ui-theme="sap_belize" data-sap-ui-libs="sap.m,sap.ui.layout,sap.ui.commons,sap.ui.table"
    data-sap-ui-compatVersion="edge" data-sap-ui-preload="async"
    data-sap-ui-resourceroots='{
            "sap.ui.demo.wt": "./"
         }'>    
</script>
<script>
    sap.ui.getCore().attachInit(function() {
        //Define some sample data
        var aData = [
            {lastName: "Dente", name: "Al"},
            {lastName: "Friese", name: "Andy"},
            {lastName: "Mann", name: "Anita"},
            {lastName: "Schutt", name: "Doris"},
            {lastName: "Open", name: "Doris"},
            {lastName: "Dewit", name: "Kenya"}
        ];

        //Create an instance of the table control
        var oTable2 = new sap.ui.table.Table({
            visibleRowCount: 7,
            firstVisibleRow: 3
        });

        //Define the columns and the control templates to be used
        oTable2.addColumn(new sap.ui.table.Column({
            label: new sap.ui.commons.Label({text: "Last Name"}),
            template: new sap.ui.commons.TextView().bindProperty("text", "lastName"),
            width: "200px"
        }));

        oTable2.addColumn(new sap.ui.table.Column({
            label: new sap.ui.commons.Label({text: "First Name"}),
            template: new sap.ui.commons.TextField().bindProperty("value", "name"),
            width: "200px"
        }));

        //Create a model and bind the table rows to this model
        var oModel2 = new sap.ui.model.json.JSONModel();
        oModel2.setData({modelData: aData});
        oTable2.setModel(oModel2);
        oTable2.bindRows("/modelData");
        //Initially sort the table
        oTable2.sort(oTable2.getColumns()[0]);
        //Bring the table onto the UI
        oTable2.placeAt("content");

    });
</script>
<body class="sapUiBody" id="content">
</body>
</html>

另一种解决方案（除了一个已回答）：

此解决方案基于直接修改表行。虽然修改模型更可取，但我们目前的项目情况可能不允许模型编辑：

添加索引列：

oTable2.addColumn(new sap.ui.table.Column({
    label: new sap.ui.commons.Label({text: "Index"}),
    template: new sap.ui.commons.TextView({
        text: "12"
    }),
    width: "200px"
}));

绑定成功后（或在控制器中的onAfterRendering事件中），使用以下代码：

for (var i = 0, len = oTable2.getRows().length; i < len; i++){
    var row = oTable2.getRows()[i];
    var firstControl = row.getCells()[0];
    firstControl.setText(row.getIndex()+1);
};

如果您使用的是控制器/jsview，请确保使用 jsview 中的 createId 方法为您的表提供 id，并使用 byId 方法获取控制器中的组件。

【问题讨论】：

标签： html row sapui5

【解决方案1】：

这可以在不必向模型添加“rowIndex”属性的情况下完成，而是通过使用从 BindingContext 路径获取索引的格式化函数（在本例中看起来像“/modelData/ x" 其中 x 是模型中项目的索引）。

请看下面修改后的代码。注意formatRowNumber 函数的使用。

<!DOCTYPE html >
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta charset="utf-8"/>
</head>
<script id="sap-ui-bootstrap"
    src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js"
    data-sap-ui-theme="sap_belize" data-sap-ui-libs="sap.m,sap.ui.layout,sap.ui.commons,sap.ui.table"
    data-sap-ui-compatVersion="edge" data-sap-ui-preload="async"
    data-sap-ui-resourceroots='{
            "sap.ui.demo.wt": "./"
         }'>    
</script>
<script>
    sap.ui.getCore().attachInit(function() {
        //Define some sample data
        var formatRowNumber = function(val) {
            if(!this.getBindingContext()) return null;
            var index = this.getBindingContext().getPath().split("/")[2];
            // (an example of path value here is "/modelData/0")
            return parseInt(index) + 1;
        };

        var aData = [
            {lastName: "Dente", name: "Al"},
            {lastName: "Friese", name: "Andy"},
            {lastName: "Mann", name: "Anita"},
            {lastName: "Schutt", name: "Doris"},
            {lastName: "Open", name: "Doris"},
            {lastName: "Dewit", name: "Kenya"}
        ];

        //Create an instance of the table control
        var oTable2 = new sap.ui.table.Table({
            visibleRowCount: 7,
            firstVisibleRow: 3
        });

        //Define the columns and the control templates to be used
       oTable2.addColumn(new sap.ui.table.Column({
            label: new sap.ui.commons.Label({text: "Index"}),
            template: new sap.ui.commons.TextView().bindProperty("text", {path: '', formatter:formatRowNumber}),
            width: "200px"
        }));

        oTable2.addColumn(new sap.ui.table.Column({
            label: new sap.ui.commons.Label({text: "Last Name"}),
            template: new sap.ui.commons.TextView().bindProperty("text", "lastName"),
            width: "200px"
        }));

        oTable2.addColumn(new sap.ui.table.Column({
            label: new sap.ui.commons.Label({text: "First Name"}),
            template: new sap.ui.commons.TextField().bindProperty("value", "name"),
            width: "200px"
        }));

        //Create a model and bind the table rows to this model
        var oModel2 = new sap.ui.model.json.JSONModel();
        oModel2.setData({modelData: aData});
        oTable2.setModel(oModel2);
        oTable2.bindRows("/modelData");
        //Initially sort the table
        oTable2.sort(oTable2.getColumns()[0]);
        //Bring the table onto the UI
        oTable2.placeAt("content");


    });
</script>
<body class="sapUiBody" id="content">
</body>
</html>

请看下面的截图：

【讨论】：

【解决方案2】：

请查找更新的功能代码希望对您有帮助

sap.ui.getCore().attachInit(function() {
    //Define some sample data
    var aData = [
        {lastName: "Dente", name: "Al"},
        {lastName: "Friese", name: "Andy"},
        {lastName: "Mann", name: "Anita"},
        {lastName: "Schutt", name: "Doris"},
        {lastName: "Open", name: "Doris"},
        {lastName: "Dewit", name: "Kenya"}
    ];

    //Create an instance of the table control
    var oTable2 = new sap.ui.table.Table({
        visibleRowCount: 7,
        firstVisibleRow: 3
    });
    oTable2.addColumn(new sap.ui.table.Column({
        label: new sap.ui.commons.Label({text: "Index"}),
        template: new sap.ui.commons.TextView().bindProperty("text", "rowIndex"),
        width: "200px"
    }));
    //Define the columns and the control templates to be used
    oTable2.addColumn(new sap.ui.table.Column({
        label: new sap.ui.commons.Label({text: "Last Name"}),
        template: new sap.ui.commons.TextView().bindProperty("text", "lastName"),
        width: "200px"
    }));

    oTable2.addColumn(new sap.ui.table.Column({
        label: new sap.ui.commons.Label({text: "First Name"}),

        template: new sap.ui.commons.TextField().bindProperty("value", "name"),
        width: "200px"
    }));
    function fnAppenData(count,data, objName){
        return Array.apply(null, Array(count)).map(function(obj, i) {
            var obj = data[i];
            var name = data[i][objName];
            data[i][objName] =  (i + 1) + " " + name;
            data[i]["rowIndex"] = (i + 1);
            var returndata = data[i];
            return returndata;
            //return {name: names[i % names.length] + i};
        });
    }
    //Create a model and bind the table rows to this model
    var oModel2 = new sap.ui.model.json.JSONModel(fnAppenData(aData.length, aData, "lastName"));
    oModel2.setData({modelData: aData});
    oTable2.setModel(oModel2);
    oTable2.bindRows("/modelData");
    //Initially sort the table
    oTable2.sort(oTable2.getColumns()[0]);
    //Bring the table onto the UI
    oTable2.placeAt("content");

});

样本输出：

【讨论】：

感谢您鼓励模型编辑的答案。没有必要为姓氏添加索引（对不起，如果我最初的问题模棱两可），但很高兴知道这也可以做到。我们当前的项目环境可能不允许更改模型，因此我通过直接操作 html 数据来编辑问题以得到答案（我知道，这不是好方法......）