用于突出显示表行或列的替代颜色

Question

表格替代颜色suggested in the dev guide不起作用。

#salesarea tbody tr:nth-child(even) {
    background: rgb(245, 245, 245);
}

即使我使用sap.m.Table的ID，CSS也不起作用！

编辑添加代码： 我正在使用xml / desktop版本，视图在shell中。

view.xml用

<Table
    id="qcTable"
    inset="false"
>
    <columns>
        <Column
            hAlign="Center"
            popinDisplay="Inline"
            width="10%"
        >
            <header>
                <Label text="Col 1"/>
            </header>
        </Column>
        <Column
            hAlign="Center"
            popinDisplay = "Inline"
        >
            <header>
                <Label text="Col2"/>
            </header>
        </Column>
    </columns>
</Table>

的style.css

//using generated id during runtime

#viewCQ--qcTable-tblBody tbody tr:nth-child(even) {
    background: rgb(245, 245, 245) !important;
}

//using direct id of table

#viewCQ tbody tr:nth-child(even) {
    background: rgb(245, 245, 245) !important;
}

//using class of table

.viewCQ tbody tr:nth-child(even) {
    background: rgb(245, 245, 245) !important;
}

Answer 1

哇..我自己发现了这个错误..我应该用

<强> viewCQ - qcTable-listUl

不是

viewCQ--qcTable-tblBody. 

无论如何，感谢所有快速反应的人。 tnx再次。

Answer 2

这种方法确实有效。您需要确保CSS选择器指向正确的位置。这是一个示例（在StackOverflow片段中）：

＆＃13;

＆＃13;

new sap.m.Table("salesarea", {
  columns : [
    new sap.m.Column({
      header : new sap.m.Text({text: "Place"})
    })
  ],
  items: {
    path: "/places",
    template: new sap.m.ColumnListItem({
      cells : [
        new sap.m.Text({text: "{name}"})
      ]
    })
  }
})
.setModel(new sap.ui.model.json.JSONModel({
  places: [
    { name: "Manchester" },
    { name: "Liverpool" },
    { name: "Leeds" },
    { name: "Sheffield" }
  ]
}))
.placeAt("content");

＆＃13;

#salesarea tbody tr:nth-child(even) {
    background: rgb(245, 245, 245);
}

＆＃13;

<script src="https://openui5.hana.ondemand.com/resources/sap-ui-core.js" id="sap-ui-bootstrap" data-sap-ui-libs="sap.m" data-sap-ui-theme="sap_bluecrystal"></script>
<div id="content"></div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

您是否在（声明性）视图中使用了表格？然后ID将作为前缀以保证唯一性。 您可能希望使用oTable.addStyleClass("mySalesTable");将CSS类分配给此表实例，而不是依赖于ID。然后你可以确定这个类将在HTML中，并将其用于样式：

.mySalesTable tbody tr:nth-child(even) { background: rgb(245, 245, 245); }

如果这不起作用，请检查浏览器的开发人员工具1.是否实际应用此规则，以及2.是否由其他规则编写。

Answer 4

我们可以使用sap.m.ObjectStatus

代替使用Css属性来提供颜色

 var iDtemplate = new sap.m.ColumnListItem("idTemplate",{
             type: "Navigation",
              visible: true,
              selected: true,
                cells:[


                       new sap.m.ObjectStatus({
                           text:"{SlNo}",
                       }).bindProperty("state", "number", function(value) {
                              return getStatusColor(value);
                       }),


                      new sap.m.ObjectStatus({
                           text:"{Name}",
                       }).bindProperty("state", "number", function(value) {
                              return getStatusColor(value);
                       }),
                       ],
                     pressListMethod: function(event){
                            var bindingContext = event.getSource().getBindingContext();

                     }
            });

            function getStatusColor(status) {
                 if (status === '') {
                   return "Error";
                 } 

                 else {
                     return "Success";
                 }
                }

根据数字字段，我们为列Slno和名称提供颜色。

Answer 5

================== XML ============================ =======

<t:Table >
            <t:columns>
                 <t:Column width="11rem">
                    <Label text="标志" />
                    <t:template>
                        <Text text="{
                      path: 'status',
                      formatter: 'yaoji.utils.formatter.format'
                            }" 
                    />
                    </t:template>
                </t:Column>
            </t:columns>
        </t:Table>

===================格式js ========================== =

yaoji.utils.formatter.format = function (cellValue) {
     this.onAfterRendering= function() {
     //!!! if not after redering, can't get the dom
        var cellId = this.getId(); 
        $("#"+cellId).parent().parent().parent().css("background-                         color","red"); 
     return cellValue;
};  

Answer 6

UI5现在支持替代颜色，可以通过sap.m.Table以及sap.ui.table.Table上的属性alternateRowColors（自1.52开始）应用。