SAPUI5：如何在表中显示行索引-Java 学习之路

我是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>

Another Solution (besides one answered):

此解决方案基于直接修改表行 . 尽管修改模型更可取，但我们当前的项目环境可能不允许进行模型编辑：

添加索引列：

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);
};

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

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");

});

样本输出：
enter image description here

回复于 2024-04-29T07:00:28+08:00

这可以在不必向模型添加"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>

请参见下面的屏幕截图：
enter image description here

回复于 2024-04-29T07:00:28+08:00

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

2 回答

相关问题