Question

我正在如下使用响应表：

<m:Table id="csTable" inset="false" items="{ path: 'Orders>/', sorter: { path: 'OrderID' } }" enableBusyIndicator="true">
    <m:columns>
        <m:Column width="8em">
            <m:Text text="Order ID"/>
        </m:Column>
        <m:Column minScreenWidth="Medium" demandPopin="true">
            <m:Text text="Order date"/>
        </m:Column>
        <m:Column minScreenWidth="Desktop" demandPopin="true" hAlign="End">
            <m:Text text="Required date"/>
        </m:Column>
        <m:Column minScreenWidth="Desktop" demandPopin="true" hAlign="Center">
            <m:Text text="Postal code"/>
        </m:Column>
        <m:Column minScreenWidth="Desktop" demandPopin="true" hAlign="Center">
            <m:Text text="Ship city"/>
        </m:Column>
        <m:Column minScreenWidth="Desktop" demandPopin="true" hAlign="Center">
            <m:Text text="Ship country"/>
        </m:Column>
    </m:columns>
    <m:items>
        <m:ColumnListItem type="Navigation" press="onPress">
            <m:cells>
                <m:ObjectIdentifier title="{Orders>OrderID}"/>
                <m:Text text="{ path : 'Orders>OrderDate', type : 'sap.ui.model.type.Date', formatOptions: { style : 'long' } }"/>
                <m:Text text="{ path : 'Orders>RequiredDate', type : 'sap.ui.model.type.Date', formatOptions: { style : 'long' } }"/>
                <m:Text text="{Orders>ShipPostalCode}"/>
                <m:Text text="{Orders>ShipCity}"/>
                <m:Text text="{Orders>ShipCountry}"/>
            </m:cells>
        </m:ColumnListItem>
    </m:items>
</m:Table>

当屏幕调整大小为Order date时，我想隐藏列Phone。如您所见，列Order date的设置为：

<m:Column minScreenWidth="Medium" demandPopin="true">
    <m:Text text="Order date"/>
</m:Column>

列Order date应该隐藏在Phone上。如何存档？

Answer 1

我建议您使用Component init方法来制作Device模型。您可以这样：

var oModel = new sap.ui.model.json.JSONModel(sap.ui.Device);
this.setModel(oModel, "device");

然后，您可以将visible属性绑定到true上，而该设备不是手机，例如：

<m:Column visible="{= !${device>/system/phone}}" minScreenWidth="Medium" demandPopin="true">
    <m:Text text="Order date"/>
</m:Column>

如果这不起作用，则设备模型还可以使用其他一些属性，例如device>/resize/width，或者甚至可以将处理程序附加到resize API上，该API会在屏幕调整大小时触发（如果您希望它通过调整onInit方法来触发调整大小而不是仅按设备触发：

sap.ui.Device.resize.attachHandler(function(mParams){ 
    // do what you want with mParams.height or mParams.width
});

Answer 2

您可以在控制器中获取设备类型，然后尝试this，也可以将 sapUiVisibleOnlyOnDesktop 类设置为列，如here所示。

如何隐藏sap.m.Table上的列？

2 个答案: