Question

我已经开始使用我的第一个SAPUI5应用程序并构建响应表。现在我需要为特定行着色取决于模型中的值。

我正在使用XML-View。

我可以在控制器中定义一个方法吗？（它应该如何工作？）

Home.view.xml

<Table id="idMachineTable"
    inset="false"
    items="{
        path: 'machinemodel>/collection'
    }">
    <headerToolbar>
        <Toolbar>
            <Title text="Header" level="H2"/>
        </Toolbar>
    </headerToolbar>
    <columns>
        <Column
            width="12em">
            <Text text="Product" />
        </Column>
        <Column
            hAlign="Right">
            <Text text="Price" />
        </Column>
    </columns>
    <items>
        <ColumnListItem>
            <cells>
                <ObjectIdentifier
                    title="{machinemodel>test}"
                    text="{machinemodel>test}"/>
                <Text
                    text="{machinemodel>test}" />   
            </cells>
        </ColumnListItem>
    </items>
</Table>

Answer 1

您可以使用customdata attribute that creates a dom attribute执行此操作。然后，您可以通过css选择要着色的行。

<ColumnListItem>
   <customData>
      <core:CustomData key="mydata" value="{machinemodel>status}" writeToDom="true" />
   </customData>
   <cells>
     ...

<html:style type="text/css">
   tr[data-mydata="B"] {
     background-color: #faa !important;
   } 
</html:style>

jsbin上的完整示例。

Answer 2

我喜欢@schnoebel提供的答案

这是另一种方式（jsbin），在Items绑定中定义了一个更改处理程序

items="{
    path: 'machinemodel>/collection',
    events: {
      change: '.onItemsChange'
    }
}"

然后在处理程序中添加你的样式类

onItemsChange: function(oEvent){
   var oTable = this.byId("idMachineTable");

   oTable.getItems().forEach(function(oItem){
      var oContext = oItem.getBindingContext("machinemodel");
      if (oContext && oContext.getObject().status === 'A'){
         oItem.addStyleClass("overdue");
      } 
  });   
}

SAPUI5 XML视图表颜色

2 个答案: