我用谷歌搜索如何根据列内的值更改表(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提前。
要操作表格行,我通常通过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');
我知道这已经是一个老问题了,但也许可以帮助别人。
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;
}
我希望这有帮助!