我有一个数据来自后端的表。根据特定条件(数据来自后端(网关服务)),如果条件为真,那么特定行将有不同的颜色,并将有一个完整的行链接。如果条件为假,那么它将是一个正常的行。那么如何实现呢?
xmakbtuz1#
现在支持行的语义颜色,可通过使用属性highlight来加以利用
highlight
sap.m.ColumnListItem
sap.m.Table
<Table xmlns="sap.m"> <!-- ... --> <ColumnListItem highlight="{= ${odataModel>foo} > 50 ? 'Error' : undefined }" /> </Table>
sap.ui.table.RowSettings
sap.ui.table.Table
<table:Table xmlns:table="sap.ui.table"> <table:rowSettingsTemplate> <table:RowSettings highlight="{= ${odataModel>foo} > 50 ? 'Error' : undefined }" /> </table:rowSettingsTemplate> <!-- ... --> </table:Table>
8ftvxx2r2#
我认为有几个不同的方法来改变颜色,最简单的将是改变风格的关联控制
<control>.addStyleClass(myClass); <control>.toggleStyleClass(myClass, true);
在下面的示例JsBin - alert overdue rows中,我在表行上使用以下内容
row.$().addClass("overdue");
它将css样式“过期”添加到行的domRef中
nbnkbykc3#
我假设你有一个普通的HTML表格,那么:
$("table tr").each(function(){ if( condition ){ //your condition eg. $(this).children("td:eq(1)").val() == sth $(this).css("background":COLOR); } });
lnxxn5zx4#
@Ashish只使用sapui 5是非常困难的,在这种情况下你需要使用jquery,如果条件为真,获取行的索引,并有一个选择器,然后使用like
$('.myTable tr:nth-child('+rowindex+')').css("background-color","red")
试试这个。不确定
8dtrkrch5#
在UI5中,我不确定是否可以一次对一行执行此操作,但可以使用valueState属性对单个单元格执行此操作:
valueState
var oConditionalColumn = new sap.ui.table.Column({ label: new sap.ui.commons.Label({ text: "Some label" }), template: (new sap.ui.commons.TextField({ value : "{myfield}", valueState : { parts : [myfield], formatter : function(oValue) { return (oValue === undefined || oValue == null || oValue == "" || isNaN(oValue) || parseInt(oValue) == 0) ? sap.ui.core.ValueState.Error : sap.ui.core.ValueState.None; } }, })) });
或者,在加载模型时,根据您的条件预先设置一个额外的计算属性,然后使用该属性针对当前行上下文以不同的颜色呈现行中的每个单元格,只需对上述代码进行少量修改。
zbq4xfa06#
我们可以使用sap.m.ObjectStatus来应用颜色,而不是使用CSS。
sap.m.ObjectStatus
var iDtemplate = new sap.m.ColumnListItem("idTemplate", { type: "Navigation", visible: true, selected: true, cells: [ new sap.m.ObjectStatus({ text: "{SlNo}", }).bindProperty("state", "number", function(value) { return getStatusColor(value); }), new sap.m.ObjectStatus({ text: "{Name}", }).bindProperty("state", "number", function(value) { return getStatusColor(value); }), ], pressListMethod: function(event) { var bindingContext = event.getSource().getBindingContext(); } }); function getStatusColor(status) { if (status === '') { return "Error"; } else { return "Success"; } }
根据 number 字段,我们为列 Slno 和 Name 指定颜色。
6条答案
按热度按时间xmakbtuz1#
现在支持行的语义颜色,可通过使用属性
highlight
来加以利用sap.m.ColumnListItem
上使用sap.m.Table
时(自1.44起):sap.ui.table.RowSettings
上使用sap.ui.table.Table
时(自1.48起):样品
sap.ui.table.Table
)sap.m.Table
和sap.ui.table.Table
)8ftvxx2r2#
我认为有几个不同的方法来改变颜色,最简单的将是改变风格的关联控制
在下面的示例JsBin - alert overdue rows中,我在表行上使用以下内容
它将css样式“过期”添加到行的domRef中
nbnkbykc3#
我假设你有一个普通的HTML表格,那么:
lnxxn5zx4#
@Ashish只使用sapui 5是非常困难的,在这种情况下你需要使用jquery,如果条件为真,获取行的索引,并有一个选择器,然后使用like
试试这个。不确定
8dtrkrch5#
在UI5中,我不确定是否可以一次对一行执行此操作,但可以使用
valueState
属性对单个单元格执行此操作:或者,在加载模型时,根据您的条件预先设置一个额外的计算属性,然后使用该属性针对当前行上下文以不同的颜色呈现行中的每个单元格,只需对上述代码进行少量修改。
zbq4xfa06#
我们可以使用
sap.m.ObjectStatus
来应用颜色,而不是使用CSS。根据 number 字段,我们为列 Slno 和 Name 指定颜色。