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

Question

我有一個表，其中數據來自后端。 根據特定條件（來自后端（網關服務）的數據），如果該條件為true，則該特定行將具有不同的顏色，並將在整行上具有鏈接。 如果條件為假，則它將是正常行。

那么如何實現呢？

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

@僅使用sapui5很難做到。 在這種情況下，您需要使用jquery。 如果條件成立，則獲取行的索引並為其選擇一個索引，然后使用like

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

嘗試這個。 不確定

Answer 5

在UI5中，我不確定是否可以一次連續執行此操作，但是肯定可以使用valueState屬性對單個單元格執行此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;
            }
        },
    }))
});

或者，當您加載模型時，請根據您的條件預先設置一個額外的計算屬性，並使用該屬性對當前行上下文使用不同的顏色來渲染行中的每個單元格，並對上述代碼進行較小的修改。

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和Name列提供顏色。