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

How to change the color of row in table (SAPUI5)?

提问by Ash

I have a table in which data is coming from back end. Based on particular condition(data coming from back end (gateway service)), if that condition is true then that particular row will have different color and will have a link on full row. And if condition is false then it will be a normal row.

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

So how to achieve it ?

那么如何实现呢？

回答by Boghyon Hoffmann

Semantic colors for rows are now supported which can be leveraged by using the property highlight

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

• on ColumnListItemwhen using sap.m.Table(since 1.44):

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

• on RowSettingswhen using sap.ui.table.Table(since 1.48):

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

  

• 使用ColumnListItem时sap.m.Table（自 1.44 起）：

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

• 使用RowSettings时sap.ui.table.Table（自 1.48 起）：

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

  

---

---

Samples

样品

• Demo Kit sample Row Highlights
• Sample with indication colors, available since 1.62: https://jsbin.com/toxehec/edit?html,js,output

• 演示套件示例行亮点
• 带有指示颜色的示例，自 1.62 起可用：https: //jsbin.com/toxehec/edit? html, js, output

回答by Jasper_07

I think there are few different ways to change the colour, the easiest would be to change the style of the associate control

我认为更改颜色的方法很少，最简单的方法是更改​​关联控件的样式

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

in the following example JsBin - alert overdue rowsi use the following on a table row

在以下示例中JsBin - 提醒过期行我在表行上使用以下内容

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

it adds the css style "overdue" to the domRef of the row

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

回答by Micha?

I assume you've got regular HTML table, then:

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

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

回答by Tuhin

@Ashish its very difficult using only sapui5. you need to use jquery in that case. If that condition is true get the row's index and have a selector of that and then use like

@Ashish 仅使用 sapui5 非常困难。在这种情况下，您需要使用 jquery。如果该条件为真，则获取行的索引并有一个选择器，然后使用 like

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

Try this. not sure

试试这个。不确定

回答by Qualiture

In UI5, I'm not sure if you can do this for a row at once, but you can certainly do this for a single cell using the valueStateproperty:

在 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;
            }
        },
    }))
});

Or, when you load the model, set an extra calculated property in advance based on your condition, and use that property to render each cell in your row in a different color for the current row context with a mior modification of the above code.

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

回答by anjaly

Instead of using CSS we can use sap.m.ObjectStatusto apply colors.

我们可以不使用 CSSsap.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";
  }
}

Based on the numberfield we are giving colors to columns Slnoand Name.

根据数字字段，我们为Slno和Name列赋予颜色。