如何根据该行中某个单元格中的数据将CSS应用于sap.m.table行

时间:2016-01-05 22:30:46

标签: sap sapui5

我正在使用sap.m.table。我要求根据表格中这些行的一列中的数据应用或更改某些行的背景颜色。

我正在使用以下代码,但它无效

创建了CSSfile:test.css

<style type="text/css">
    .Total {
        background-color: LightSteelBlue  !important;
    }
</style>

上面的CSS文件在Component.js中声明如下方式(如果这不是正确的方法,可以在整个ui5项目中访问css文件,请更正我。

"resources": {
    "css": [
        {
            "uri": "css/test.css"
        }
    ]
}

在Controller.i中定义了以下方法,仅在表格中为特定行应用样式表。

rowColours: function() {
    var oController = this;
    console.log("rowColours() --> Start ");
    var oTable = this.oView.byId("tblAllocation");
    var rows = oTable.getItems().length; //number of rows on tab

    //start index 
    var row;
    var cells = [];
    var oCell = null;
    for (i = 0; i < oTable.getItems().length; i++) {
        //console.log("rowColours() :: row--> "+row);
        //actualRow = oTable.getItems(); //content
        if (i == 0) {
            row = oTable.getItems()[i];
            cells = cells.concat(oTable.getItems()[i].getCells());
            //getting the cell id
            oCell = cells[2];

            oCell = oCell.toString().substring(29, oCell.length);
            otemp = this.getView().byId(oCell).getText();

            if (otemp.toString() == "TotalAllocation") {
                oTable.getItems()[i].$().taggleClass("grandTotal");
            }
        }
    }
    console.log("rowColours() --> end ");
}

在上面的方法中。我正在检查cell2数据(在表格单元格2中我使用Textview控件来显示数据。当调用此方法获取该单元格中的数据时。我收到以下错误。

otemp = this.getView().byId(oCell).getText());

错误: 未捕获的TypeError:无法读取未定义的属性'getText'

以下代码可以更改行bg颜色。

if (otemp.toString() == "TotalAllocation") {
    oTable.getItems()[i].$().taggleClass("Total");
}

请告诉我如何更改bg颜色或在sap.m.table中应用特定行的样式

由于

1 个答案:

答案 0 :(得分:2)

以下方法不对。更好的是你可以使用格式化程序。

示例:

var oTable = new sap.m.Table({
    columns: [
        new sap.m.Column({
            header: new sap.m.Label({
                text: "Name"
            }),
        }),
    ],
    items: {
        path: 'modelList>/',
        template: new sap.m.ColumnListItem({
            cells: [
                new sap.m.Text({
                    //formatter to the text property on sap.m.Text control.    
                    text: {
                        parts: [{
                            "path": "modelList>Name"
                        }],
                        formatter: function(name) {
                            if (name == "TotalAllocation") {
                                // use this.getParent().. until u get the row.    like this below and add class.
                                this.getParent().getParent().addStyleClass("Total");
                            }
                        }
                    }
                })
            ]
        })
    }
});