Question

有一个关于table的openui5官方示例。

无论如何都要为Table.view.xml中的表行动态设置class属性。

<ColumnListItem>
    <cells>
        <ObjectIdentifier
            title="{Name}"
            text="{ProductId}"/>
        <Text
            text="{SupplierName}" />
        <Text
            text="{Width} x {Depth} x {Height} {DimUnit}" />
        <ObjectNumber
            number="{WeightMeasure}"
            unit="{WeightUnit}"
            state="{
                path: 'WeightMeasure',
                formatter: 'sap.m.sample.Table.Formatter.weightState'
            }" />
        <ObjectNumber
                number="{
                    parts:[{path:'Price'},{path:'CurrencyCode'}],
                    type: 'sap.ui.model.type.Currency',
                    formatOptions: {showMeasure: false}
                }"
                unit="{CurrencyCode}" />
    </cells>
</ColumnListItem>

EG。第1行

<ColumnListItem class="bg-gray">

第2行

<ColumnListItem class="bg-blue">

第3行

<ColumnListItem class="bg-green">

以下代码不符合要求：

<ColumnListItem class="{rowStyle}">

Answer 1

不幸的是，＆＃39; class＆＃39;不能绑定一个属性。但是有一些简单的选择。

它涉及以下步骤。

使用绑定在DOM中创建属性（使用CustomData）。

      <ColumnListItem type="Active">
        <customData>
          <core:CustomData key="background" value="{Country}" writeToDom="true" />
        </customData>
        <cells>
            <ObjectIdentifier title="{CustomerID}"/>
            <Text text="{CompanyName}"/> 
            <Text text="{Address}"/> 
            <Text text="{Country}"/> 
        </cells>
    </ColumnListItem>

使用Attribute-Value CSS选择器选择上面的内容编写DOM并应用颜色
```
tr[data-background="Mexico"] {
 background-color: #eaa6a6 !Important;
}
```

我在这里写了一篇博客。 https://blogs.sap.com/2016/12/02/binding-based-dynamic-background-colors-for-sap.m.table-rows/

JS Bin

Answer 2

你可以使用格式化程序，功能将是这样的：

setColour : function(Condition){
  if(Condition){
     var cellId = this.getId();
     $("#"+cellId).parent().parent().parent().css("background-color","Blue");
  }
}

您的列代码将如下所示：

<Input value="{path:'Condition',formatter:'formmater_path.setColour'}" />

如何在openui5 / sapui5中动态设置表行类值？

2 个答案: