Question

目前，如果返回的数字为绿色，我有一个表格可以提取数据并格式化文本。

我无法弄清楚如何根据单元格值更改表格单元格的背景颜色。

是否有人能够指出我正确的方向，因为我不知道从哪里开始，也无法在谷歌上找到任何信息。

这是我之前为格式化单元格文本所做的事情。

表格列：

<ObjectStatus 
    text="{dataModel>CurrentPerformanceIndicator}"
    state="{
        path: 'dataModel>CurrentPerformanceIndicator',
        formatter: '.formatter.statusText'
    }" />

格式化：

statusText: function (sStatus) {
    switch (sStatus) {
        case 80:
            return "Success";
        default:
            return "None";
    }
}

Answer 1

如果您的列位置已修复，您可以尝试这样的事情......

<ColumnListItem>
    <customData>
       <core:CustomData key="my-cell-background" value="{dataModel>CurrentPerformanceIndicator}" writeToDom="true" />
    </customData>
    <cells>
        <ObjectStatus text="{dataModel>CurrentPerformanceIndicator}" />
    </cells>
</ColumnListItem>

...然后将以下CSS添加到样式表中，将1替换为列的位置

[data-my-cell-background="80"] > td:nth-child(1) {
    background-color: #007833;
}

...或者如果您想设置整行的背景，请将CSS更改为

[data-my-cell-background="80"] {
    background-color: #007833 !important;
}

Answer 2

具有相同的要求，并且由于SAPUI5还没有table属性可以直接更改单元格颜色，因此我做了一个解决方法。

首先，如果您使用的是sap.ui.table.Table，则您不能直接在xml视图模板中添加样式类，因为它是单元格聚合，我们希望将CSS应用于而不是列聚合。

第二，在放置Text控件之前，将HBox（VBox也会这样做）放在行模板中。通过这种方法，我现在可以向HBox添加样式类，因为它会占用单元格的整个空间，因此，看起来单元格是彩色的，但事实是，HBox控件是彩色的。 >

CSS

.green {
background-color: #66FF33!important;}

查看xml（表行）

<table:Column
    autoResizable="true"
    id="projecNameCol"
    width="17rem"
    filterProperty="ProjectName"
    sortProperty="ProjectName">
    <Label text="Project Name" class="customFontSizeSmall"/>
    <table:template>
        <HBox>
             <Text text="{ProjectName}" tooltip="{ProjectName}" wrapping="true"/>
             <customData> 
             <core:CustomData 
                key="bgcolor" 
                value="{= ${ProjectHealthCode} === 'Success' ? 'green' : ${ProjectHealthCode} === 'Warning' ? 'yellow' : ${ProjectHealthCode} === 'Error' ? 'red' : 'normal'}" 
                writeToDom="true" />
             </customData>
        </HBox>
    </table:template>
</table:Column>

ui5条件格式表格单元格

2 个答案: