【问题标题】：How to change the color of row in table (SAPUI5)?如何更改表中行的颜色（SAPUI5）？
【发布时间】：2014-03-28 05:07:14
【问题描述】：

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

那么如何实现呢？

【问题讨论】：

我们在说哪个表？ sap.m.Table?还是sap.ui.table.Table？如果是后一种情况，见stackoverflow.com/a/63615774/5846045
这能回答你的问题吗？ How to highlight entire row in sap.ui.table.Table

标签： javascript jquery sapui5

【解决方案1】：

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

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

<Table xmlns="sap.m">
  <ColumnListItem highlight="{= ${odataModel>foo} > 50 ? 'Error' : undefined }" />
  <!-- ... -->
</Table>

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

<table:Table>
  <table:rowSettingsTemplate>
    <table:RowSettings highlight="{= ${odataModel>foo} > 50 ? 'Error' : undefined }" />
  </table:rowSettingsTemplate>
  <!-- ... -->
</table:Table>

样品

Demo Kit sample (sap.ui.table.Table)
JSBin sample with indication colors（sap.m.Table 和 sap.ui.table.Table）

【讨论】：

感谢您展示 ColumnListItem 选项，该选项在文档中难以识别。

【解决方案2】：

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

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

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

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

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

【讨论】：

JsBin 代码正在运行，但如果我在该代码中使用导航模式，您的代码将失败。我想使用导航模式。
@ashish 不确定“导航模式”是什么，如果它是 IE 的东西，演示是一个概念，示例适用于“webkit”，换成适合你的东西
导航模式是SAPUI5表中提供的一个属性。如果我最初想显示 7 个条目并且表格中总共有 15 个条目，那么我们使用导航模式来显示剩余的条目。所以在第一页，它将显示 7 个条目，下一页 7 和最后一页 1 个条目。
非常好的碧玉，也在单元基础上.. -> oRows[5].getCells()[0].$().addClass("highlight");

【解决方案3】：

我假设你有常规的 HTML 表格，那么：

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

【讨论】：

此代码适用于单页，因为我已将导航模式用作页面。这件事不适用于下一页。还有一件事，这个函数没有遵循条件部分，因为我们在这里使用每个函数，它正在对所有行应用颜色。

【解决方案4】：

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

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

试试这个。不确定

【讨论】：

【解决方案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;
            }
        },
    }))
});

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

【讨论】：

【解决方案6】：

我们可以使用sap.m.ObjectStatus 来应用颜色，而不是使用 CSS。

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 赋予颜色。

【讨论】：