javascript - UI5 应用程序(在 WebIDE 中): sap. m.ColumnListItem : Change entire row color depending on a value in one column: What is wrong?

Question

我用谷歌搜索了如何根据列中的值更改表 ( ColumnListItem ) 中行的颜色。我发现了很多谷歌结果，从所有结果中我选择了一个，它避免在我的项目文件夹中使用预定义(或单独定义)的 css。顺便说一句，即使在 F12-browser-tools 中(在前端修改 css 或类似内容)似乎也无法按预期工作。

我采用了这种方法(很旧的帖子)，但无法正常工作:

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;
                    })

            ]
        });

在这些行之后，绑定(bind)是这样启动的:

        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 });

那么，我错过了什么？在引用的链接中，采用的答案被标记为“有帮助”，因此它必须有效。有什么提示吗？提前致谢。

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');