UI5应用程序(在WebIDE中):sap.m.ColumnListItem:根据一列中的值更改整行颜色:出了什么问题?

Question

我用谷歌搜索了如何根据列内的值更改表( 列列表项(内行的颜色。我找到了很多谷歌结果，从所有结果中我选择了那个，它避免在我的项目文件夹中使用预定义(或单独定义(的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的答案可能是更清洁的方法。我也使用相同的方法。

通常，避免使用和访问自动生成的控件 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;
}

我希望这有帮助！