SAPUI5/JavaScript中如何使用OData返回值设置单元格背景色无需修改CSS

可行实现方案 #

方案1：直接操作DOM设置行内样式（最简便，无需修改CSS文件） #

这种方式直接把颜色值写到对应元素的style属性上，优先级最高，不需要预定义任何CSS规则：

oModel.read("/EspCoSet", {
    filters: [aFilters],
    success: function (oD, oR) {
        var oResults = oD.results;
        for (var i = 0; i < oResults.length; i++) {
            var color_fondo = oResults[i].ColorFondo;
            var color_texto = oResults[i].ColorTexto;
            // 替换YourBusinessField为OData实体里和data-esp属性值匹配的业务字段名
            var targetEl = document.querySelector(`[data-esp="${oResults[i].YourBusinessField}"]`);
            if(targetEl) {
                targetEl.style.backgroundColor = `#${color_fondo}`;
                targetEl.style.color = `#${color_texto}`;
            }
        }
    },
    error: function (oE) {
        console.log("Error");
    }
});

方案2：动态生成CSS规则注入页面（适合批量匹配多元素场景） #

如果需要匹配的元素数量较多，不想挨个遍历DOM，可以动态把所有OData返回的颜色规则生成CSS，插入到页面样式表中一次性生效：

oModel.read("/EspCoSet", {
    filters: [aFilters],
    success: function (oD, oR) {
        var oResults = oD.results;
        // 创建动态样式标签
        var style = document.createElement('style');
        var cssText = '';
        for (var i = 0; i < oResults.length; i++) {
            var color_fondo = oResults[i].ColorFondo;
            var color_texto = oResults[i].ColorTexto;
            // 替换YourBusinessField为OData实体里和data-esp属性值匹配的业务字段名
            var businessVal = oResults[i].YourBusinessField;
            // 拼接CSS规则
            cssText += `[data-esp="${businessVal}"] * {
                background-color: #${color_fondo} !important;
                color: #${color_texto} !important;
            }`;
        }
        style.innerHTML = cssText;
        document.head.appendChild(style);
    },
    error: function (oE) {
        console.log("Error");
    }
});

补充：SAP UI5 绑定场景专属方案 #

如果你是用SAP UI5的表格控件（比如sap.m.Table）做绑定渲染，还可以直接在视图绑定规则里加格式化器，不需要单独调用read接口取数：
视图XML示例：

<ColumnListItem>
    <cells>
        <Text 
            text="{EspText}" 
            backgroundColor="{ path: 'ColorFondo', formatter: '.formatBgColor' }"
            color="{ path: 'ColorTexto', formatter: '.formatTextColor' }"
        />
    </cells>
</ColumnListItem>

控制器格式化器方法：

formatBgColor: function(sColor) {
    return sColor ? `#${sColor}` : null;
},
formatTextColor: function(sColor) {
    return sColor ? `#${sColor}` : null;
}

以上三种方案都不需要提前编写静态CSS，完全复用OData返回的动态颜色值，无需硬编码任何颜色或业务标识。

内容的提问来源于stack exchange，提问作者kyara