jquery 如何改变表格(SAPUI5)中行的颜色?

7nbnzgx9  于 2023-01-25  发布在  jQuery
关注(0)|答案(6)|浏览(209)

我有一个数据来自后端的表。根据特定条件(数据来自后端(网关服务)),如果条件为真,那么特定行将有不同的颜色,并将有一个完整的行链接。如果条件为假,那么它将是一个正常的行。
那么如何实现呢?

xmakbtuz

xmakbtuz1#

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

  • sap.m.ColumnListItem上使用sap.m.Table时(自1.44起):
<Table xmlns="sap.m">
  <!-- ... -->
  <ColumnListItem highlight="{= ${odataModel>foo} > 50 ? 'Error' : undefined }" />
</Table>
  • sap.ui.table.RowSettings上使用sap.ui.table.Table时(自1.48起):
<table:Table xmlns:table="sap.ui.table">
  <table:rowSettingsTemplate>
    <table:RowSettings highlight="{= ${odataModel>foo} > 50 ? 'Error' : undefined }" />
  </table:rowSettingsTemplate>
  <!-- ... -->
</table:Table>

样品

8ftvxx2r

8ftvxx2r2#

我认为有几个不同的方法来改变颜色,最简单的将是改变风格的关联控制

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

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

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

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

nbnkbykc

nbnkbykc3#

我假设你有一个普通的HTML表格,那么:

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

lnxxn5zx4#

@Ashish只使用sapui 5是非常困难的,在这种情况下你需要使用jquery,如果条件为真,获取行的索引,并有一个选择器,然后使用like

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

试试这个。不确定

8dtrkrch

8dtrkrch5#

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

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

zbq4xfa0

zbq4xfa06#

我们可以使用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 字段,我们为列 SlnoName 指定颜色。

相关问题