UI5应用程序（在WebIDE中）：sap.m.ColumnListItem：根据一列中的值更改整个行颜色：有什么问题？

Question

我用谷歌搜索如何根据列内的值更改表（ColumnListItem）中的行的颜色。我发现了很多谷歌搜索结果，从我选择的所有结果中，我避免在我的项目文件夹中使用预定义（或单独定义）的CSS。顺便说一下，即使在F12浏览器工具中（修改前端的css orsuch）也似乎没有按预期工作。

我遵循这种方法（很老的帖子）并且无法使其正常工作：

https://archive.sap.com/discussions/thread/3360580

表格线应该变成绿色，黄色或红色。

到目前为止，这是我的代码，在onInit内部（第一部分，创建模板）

var oTable = this.byId("companySecret"); 
        var oView = this.getView();

        var oTemplate = new sap.m.ColumnListItem({
            cells: [
                new sap.m.Text({
                    text: "{Col1}"
                }),
                new sap.m.Text({
                    text: "{Col2}"
                }),
                new sap.m.Text({
                    text: "{Col3}"
                }),
                //
                // ALL OTHER COLUMNS
                // 
                // The only difference is that I do this inside the "loop".

                new sap.ui.commons.TextView({
                text: "{Color}"
                }).bindProperty("text", "Color",function(cellValue)
                    {
                        var backgroundColor = "red";         

                        var cellId = this.getId();

                        var row_col = $("#"+cellId);

                        // As You see, I am quite desperate
                        $("#"+cellId).css("background-color","#FF0000");
                        $("#"+cellId).parent().css("background-color","#FF0000");
                        $("#"+cellId).parent().parent().css("background-color",'#FF0000');
                        $("#"+cellId).parent().parent().parent().css("background-color","#FF0000");
                        $("#"+cellId).parent().parent().parent().parent().css("background-color","#FF0000");
                        $("#"+cellId).parent().parent().parent().parent().parent().css("background-color","#FF0000");


                        return cellValue;
                    })

            ]
        });

在这些行之后，绑定就像这样启动：

        var sUrl = "/sap/opu/odata/sap/Z_COMPANY_SECRET/";
        var oModel = new sap.ui.model.odata.v2.ODataModel(sUrl, false);
        oTable.setModel(oModel);
        oTable.bindAggregation("items", {path: "/Company_Secret", template: oTemplate });

那么，我错过了什么？在引用的链接中，所采用的答案被标记为“有用”，因此它必须起作用。任何提示？ Thx提前。

Answer 1

要操作表格行，我通常通过XML在行上使用自定义属性：

<Table>
  <columns>
    <Column><Text text="value"/></Column>
  </columns>
  <items>
    <ColumnListItem type="Active">
      <customData>
        <core:CustomData key="color" value="{= ${MyArgument} ? 'red' : 'green'}" writeToDom="true" />
      </customData>          
      <cells>
        <ObjectIdentifier text="{Value}"/>
      </cells>
    </ColumnListItem>
  </items>
</Table>

这会将名为data-color的数据属性写入DOM上的tr元素，其值为red或green。使用您自己的逻辑扩展它，或者如果检查是长的或笨重的话，使用像任何其他值那样的格式化程序。

然后，您可以通过包含的CSS文件操作该属性：

tr[data-color="red"] {
   background-color: red;
}

适合我。

你可能会做类似的事情

document.querySelectorAll('tr[data-color="red"]').forEach(s => s.style.backgroundColor = 'red');

Answer 2

我知道这已经是一个老问题了，但也许可以帮助别人。

Jorg's answer可能是更清洁的方法。我也使用相同的方法。

通常，避免使用和访问自动生成的Control-ID（特别是使用jQuery选择器）更清晰，更安全，因为这些ID最有可能在刷新绑定的模型时发生更改。

通过使用CustomData-CSS方法，您可以利用绑定，而不必担心更改ID或为模型刷新时必须更改的列表/行项找到正确的ID。

你只需要维护一些CSS。哪个更简单，更清洁。 :)

如果它有帮助，我转换你的代码以符合Jorg的答案。见下文：

new sap.ui.commons.TextView({
    text: "{Color}"
}).addCustomData(new sap.ui.core.CustomData({
    key: "color",
    value: "{= $(argument) ? 'red' : 'green'}",
    writeToDom: true
}));

在CSS中，应该与Jorg相同：

tr[data-color="red"] {
   background-color: red;
}

我希望这有帮助！