Question

我是SAP UI5的新手，并通过示例Fiori应用程序。我的XML视图包含一个表格控件，如下所示：

<Table id="idProductsTable" inset="false"
            items="{path: '/ShipmentCollection'  
        }">
            <headerToolbar>
                <Toolbar>
                    <Label text="Shipment List"></Label>
                    <ToolbarSpacer />
                    <Button icon="sap-icon://refresh" press="refreshDataFromBackend" />
                </Toolbar>
            </headerToolbar>
            <columns>
                <Column width="12em">
                    <Label text="Shipment" />
                </Column>
                <Column minScreenWidth="Tablet" demandPopin="true" hAlign="Center">
                    <Label text="Carrier`" />
                </Column>
                <Column minScreenWidth="Tablet" demandPopin="true" hAlign="Center">
                    <Label text="Dimensions" />
                </Column>
                <Column minScreenWidth="Tablet" demandPopin="true" hAlign="Center">
                    <Label text="Weight" />
                </Column>
                <Column hAlign="Center">
                    <Label text="Price" />
                </Column>
            </columns>
            <items>
                <ColumnListItem id="listItems" type="Navigation"
                    press="onListItemPress">
                    <cells>
                        <l:VerticalLayout>
                        <Label text="{ShipNum}"></Label>
                        <Label text="{Text}"></Label>
                        </l:VerticalLayout>
                        <Text text="{Carrier}" />
                        <Text text="{Route}" />
                        <Text text="{Cust}" />
                        <Text text="{DelDate}" />
                    </cells>
                </ColumnListItem>
            </items>
        </Table>

如何根据此字段的内容更改单元格1中文本字段的颜色？

谢谢！

Answer 1

1.您可以使用数据绑定格式化程序来更改颜色。例如，你的第一个细胞。

<Label text="{path:'ShipNum', formatter:'Formatter.colorFormatter'}"></Label>

2.定义用于更改css文件中颜色的yourstyle。

3.在demoformatter.js中定义函数colorFormatter

sap.ui.core.Element.extend("demoformatter", {
colorFormatter:function(value) {
    this.addStyleClass("yourstyle");
    return value;
}
});
Formatter = new demoformatter();

Answer 2

================== XML ============================ =======

<t:Table >
            <t:columns>
                 <t:Column width="11rem">
                    <Label text="标志" />
                    <t:template>
                        <Text text="{
                      path: 'status',
                      formatter: 'yaoji.utils.formatter.format'
                            }" 
                    />
                    </t:template>
                </t:Column>
            </t:columns>
        </t:Table>

===================格式js ========================== =

yaoji.utils.formatter.format = function (cellValue) {
     this.onAfterRendering= function() {
     //!!! if not after redering, can't get the dom
        var cellId = this.getId(); 
        $("#"+cellId).parent().parent().parent().css("background-                         color","red"); 
     return cellValue;
};

Answer 3

也许另一个更丑陋的选择是在表上添加updateFinished事件处理程序，然后在那里动态设置类？

SAP UI5 - 更改表格单元格中自定义数据字段的颜色

3 个答案: