Question

我有一张数据来自后端的表格。基于特定条件（来自后端（网关服务）的数据），如果该条件为真，则该特定行将具有不同的颜色并且将在整行上具有链接。如果条件为假，则它将是正常行。

那么如何实现呢？

Answer 1

现在支持行的语义颜色，可以使用属性highlight

来利用这些颜色

（自1.44起）：

<ColumnListItem
  highlight="{= ${odataModel>foo} > 50 ? 'Error' : 'None'}"
> ...

RawSettings

：

<Table>
  <rowSettingsTemplate>
    <RowSettings highlight="{= ${odataModel>foo} > 50 ? 'Error' : 'None'}"
  </rowSettingsTemplate>
  <columns> ...

Answer 2

我认为改变颜色的方法很少，最简单的方法就是改变关联控件的风格

<control>.addStyleClass(myClass);
<control>.toggleStyleClass(myClass, true);

在以下示例JsBin - alert overdue rows中，我在表格行上使用以下内容

row.$().addClass("overdue");

它将css样式“过期”添加到行的domRef

Answer 3

我假设您有常规HTML表格，然后：

$("table tr").each(function(){
    if( condition ){ //your condition eg. $(this).children("td:eq(1)").val() == sth
        $(this).css("background":COLOR);
    }
});

Answer 4

@Ashish只使用sapui5非常困难。在这种情况下你需要使用jquery。如果该条件为真，则获取行的索引并选择该索引，然后使用类似

$('.myTable tr:nth-child('+rowindex+')').css("background-color","red")

试试这个。不确定

Answer 5

在UI5中，我不确定您是否可以同时执行此行，但您当然可以使用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;
            }
        },
    }))
});

或者，当您加载模型时，根据您的条件预先设置一个额外的计算属性，并使用该属性以当前行上下文的不同颜色呈现行中的每个单元格，并修改上述内容代码。

Answer 6

我们可以使用sap.m.ObjectStatus来提供颜色，而不是使用css。

var iDtemplate = new sap.m.ColumnListItem（“idTemplate”，{ 类型：“导航”，可见：是的，选中：是的，细胞：[

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

根据数字字段，我们为列Slno和名称提供颜色。

如何更改表格中的行颜色（SAPUI5）？

6 个答案: