Question

我搜索了如何根据列内的值更改表内的行颜色（ColumnListItem）。我发现了很多google结果，并且从所有结果中选择了一个，从而避免在项目文件夹中使用预定义（或单独定义）的css。顺便说一句，即使在F12浏览器工具内部（在前端修改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;
                    })

            ]
        });

在这些行之后，立即开始绑定，如下所示：

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

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

我希望这会有所帮助！

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

2 个答案: