如何根据状态值更改 sap.ui.table.Table 行的颜色？

Question

我想根据状态值更改网格 table (sap.ui.table.Table) 的行颜色。我按照 this blog post 进行了尝试，但无法实现。

任何人都可以提供如何实现它的建议吗？

下面是xml代码：

<table:Table id="Table" rows="{Dataset>/}" selectionMode="None">
  <table:columns>
    <!-- ... -->
    <table:Column>
      <Text text="Status"/>
        <table:customData>
          <core:CustomData key="mydata" value="{DataSet>Status}" writeToDom="true" />
        </table:customData>
      </Text>
      <table:template>
        <Text text="{DataSet>Status}" wrapping="false"/>
      </table:template>
    </table:Column>
  </table:columns>
</table:Table>

CSS 文件:

tr[data-mydata="Success"] {
  background: #ff3333 !important;
}

Answer 1

有一些方法。

第一个：

在 XML 查看

<core:FragmentDefinition 
  xmlns:mvc="sap.ui.core.mvc"
  xmlns:core="sap.ui.core"
  xmlns:customData="http://schemas.sap.com/sapui5/extension/sap.ui.core.CustomData/1"
  xmlns="sap.m">
  
<!-- ... -->
<table:Column>
  <Text text="Status"/>
    <!-- ... -->
    <customData>
      <core:CustomData xmlns:core="sap.ui.core" key="background" value="FillBackgroundColor" writeToDom="true" />
    </customData>
  </Text>
<!-- ... -->

CSS:

span[data-background="FillBackgroundColor"] {
  background-color: #c9fcd5 !Important;
}

第二个：

在 XML 查看

<!-- ... -->
<table:Column>
  <Text text="Status"/>
    <!-- ... -->
    <customData>
      <core:CustomData
          key="style-class"
          value="nameOfYourColor"
          writeToDom="true"/>
    </customData>
  </Text>
<!-- ... -->

或这个

<!-- ... -->
<table:Column>
  <customData>
    <core:CustomData
        key="style-class"
        value="nameOfYourColor"
        writeToDom="true"/>
  </customData>
  <Text text="Status"/>
    <!-- ... -->
  </Text>
<!-- ... -->

CSS:

[data-style-class=nameOfYourColor] {
  background-color: #c9fcd5 !important
}

我更喜欢第二个）

如何根据状态值更改 sap.ui.table.Table 行的颜色？

How to change color of sap.ui.table.Table row based on the status value?

sapui5

sap-fiori