如何更改行的表(SAPUI5)的颜色?(How to change the color of row

2019-09-29 06:48发布

我有数据从后端来的表。 基于特定条件(数据来自后端(网关服务)来了),如果该条件为真,则该特定行都会有不同的颜色,并将对全行的链接。 如果条件为假那么这将是一个正常的一行。

那么如何实现呢?

Answer 1:

语义颜色行现在支持可通过使用属性被利用highlight

  • 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> ... 


样品

  • 演示套件样品行亮点
  • 样品与显示色,可自1.62: https://jsbin.com/toxehec/edit?html,js,output


Answer 2:

我认为有几种不同的方式来改变颜色,最简单的是改变联营控件的样式

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

在下面的例子中JsBin -提醒逾期行我用一个表行以下

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

或者,当你加载模型,根据你的条件预先设置一个额外的计算性能,并使用该属性来使你的行中的每个细胞中不同的颜色与上面的代码的修改mior当前行上下文。



Answer 6:

而不是使用CSS,我们可以使用sap.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";
  }
}

基于数字领域,我们是给颜色以列Slno名称



文章来源: How to change the color of row in table (SAPUI5)?