sapui5 - CSS 样式不能动态设置（单元格颜色）

Question

我试图实现基于两个参数给出状态的要求。我能够获得最新状态，但无法获得单元格颜色。

场景：

Scenario #       a           b         Final Status
----------   ---------   ---------   -----------------
    1)       ""(Blank)   ""(Blank)   ""(Blank)
    2)       "Y"         ""(Blank)   "Y"
    3)       "N"         ""(Blank)   "Y"
    4)       ""(Blank)   "Y"         "Y"(Yellow color)
    5)       ""(Blank)   "N"         "N"(Yellow color)
    6)       "Y"         "Y"         "Y"
    7)       "N"         "N"         "N"
    8)       "N"         "Y"         "Y"(Yellow color)
    9)       "Y"         "N"         "Y"(Yellow color)

XML 代码：

<Text id="idStatus" text="{parts :['parameter','parameter1'],
    formatter: '.formatter.availableColor'}"></Text>

格式化程序js：

availableColor: function(available, available1) {
                var that = this;
                var idText = that.getView().byId("idStatus");
                idText.removeStyleClass("yellow");

                if (available === "" && available1 === "Y") {

                    idText.addStyleClass("yellow");
                    return "Keep";
                } else if (available === "Y" && available1 === "Y") {
                    return "Keep";

                } else if (available === "N" && available1 === "Y") {
                    idText.addStyleClass("yellow");
                    return "Keep";
                } else if (available === "Y" && available1 === "") {
                    return "Keep";
                } else if (available === "" && available1 === "") {
                    return available;
                } else if (available === "" && available1 === "N") {
                    idText.addStyleClass("yellow");
                    return "Remove";
                } else if (available === "N" && available1 === "N") {

                    return "Remove";
                } else if (available === "Y" && available1 === "N") {
                    idText.addStyleClass("yellow");
                    return "Remove";
                } else if (available === "N" && available1 === "") {
                    return "Remove";
                }


            }

        };

CSS样式表：

.yellow {
    background-color: #FFFF66 !important;
}

json数据：

{
    "parameter": "",
    "parameter1": "Y",
}

标签： sapui5

Answer 1

如果您考虑遵循 Fiori 设计指南/最佳实践，请查看https://experience.sap.com/fiori-design-web/responsive-table。在那里，它还指出：

对于状态信息，使用语义颜色。

不要使用自定义 CSS 为整个单元格着色，而是尝试使用支持语义颜色的控件，例如sap.m.ObjectStatus(Demo Kit sample)。

这是一个根据规则集展示表格的演示：https ://embed.plnkr.co/02iC6S0ffMG6xwXM