问题

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 ?

回答1:

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

on ColumnListItem when using sap.m.Table (since 1.44):

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

on RowSettings when using sap.ui.table.Table (since 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

回答2:

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 rows i use the following on a table row

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

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

回答3:

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

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

回答4:

@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

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

Try this. not sure

回答5:

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 valueState property:

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.

回答6:

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

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 number field we are giving colors to columns Slno and Name.

来源：https://stackoverflow.com/questions/22704644/how-to-change-the-color-of-row-in-table-sapui5

标签

javascript

jquery

sapui5

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

问题