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

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

我建议在组件init方法中制作设备模型。你可以这样做：

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，或者甚至可以通过将处理程序附加到在屏幕调整大小时触发的调整大小 API(如果希望它在调整大小时触发，而不仅仅是通过设备触发(，方法是调用onInit方法：

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

Answer 2

您可以在控制器中获取设备类型并尝试此操作，也可以将sapUiVisibleOnlyOnDesktop类设置为列，如下所示。