使用 minScreenWidth 调整 sap.m.Table 某一列动态显示与否的例子

简介: 使用 minScreenWidth 调整 sap.m.Table 某一列动态显示与否的例子

对于 SAP UI5 响应式表格来说,不应隐藏名称和状态列是列的默认行为,所以让我们让默认值(minScreenWidth:“” 和 demandPopin:false)发挥作用。



下图是一个例子:

如果 visible 设置成 false 后,column 从屏幕上消失:



对于小型设备,型号列(Model Number)应该被隐藏,所以我们的断点是 minScreenWidth:“Small” 和 demandPopin:false(默认值)。


数量、单价和最终价格列应该进入我们的弹出区域,因此我们的断点仍然是 minScreenWidth:“Small” 但现在使用 demandPopin:true 以在弹出区域中显示该列。


例如,在平板电脑和更宽的设备上,我们将有更多可用空间,因此我们可以显示“最终价格”列,但对于更小的设备,我们将恢复为弹出模式。 所以这里我们的断点应该是 minScreenWidth:“Tablet” 和 demandPopin:true。


什么是 SAP UI5 sap.m.Column 的 minScreenWidth 属性?


SAP UI5中的sap.m.Column是用于在Table和ColumnListItem控件中创建列的UI元素。minScreenWidth是该控件的一个属性,用于定义列应在哪个屏幕宽度下隐藏。


当minScreenWidth设置为某个特定屏幕宽度(例如“600px”)时,如果设备的屏幕宽度小于该值,则该列将被隐藏。这可以帮助在小屏幕设备上提高用户体验,使表格内容更加易于查看和操作。当用户使用大屏幕设备时,该列将自动显示出来。


例如,假设您有一个具有五个列的表格,您可以为其中的某些列设置minScreenWidth属性。如果用户在小屏幕设备上查看该表格,只会显示设置了minScreenWidth属性为较大值的列,其他列将被隐藏。当用户在大屏幕设备上查看该表格时,所有列都将显示出来。


下面是一个例子:


<mvc:View xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m">
  <Table id="myTable">
    <columns>
      <Column>
        <Text text="Column 1" />
      </Column>
      <Column minScreenWidth="600px">
        <Text text="Column 2" />
      </Column>
    </columns>
    <items>
      <ColumnListItem>
        <cells>
          <Text text="Data 1" />
          <Text text="Data 2" />
        </cells>
      </ColumnListItem>
    </items>
  </Table>
</mvc:View>

在这个例子中,Column元素中的minScreenWidth属性设置为"600px",这意味着在设备屏幕宽度小于600像素时,该列将被隐藏。另外一个Column元素没有设置minScreenWidth属性,这意味着该列将一直显示,无论屏幕宽度大小。

相关文章
隐藏el-table-column过多的内容并进行浮窗展示
隐藏el-table-column过多的内容并进行浮窗展示
隐藏el-table-column过多的内容并进行浮窗展示
PyQt5 技术篇-QTableWidget表格组件指定行的隐藏与显示控制实例演示,设置表格指定列的列宽方法
PyQt5 技术篇-QTableWidget表格组件指定行的隐藏与显示控制实例演示,设置表格指定列的列宽方法
664 0
PyQt5 技术篇-QTableWidget表格组件指定行的隐藏与显示控制实例演示,设置表格指定列的列宽方法
|
3月前
Element UI 【表格合计】el-table 实战范例 -- 添加单位,自定义计算逻辑
Element UI 【表格合计】el-table 实战范例 -- 添加单位,自定义计算逻辑
197 0
使用 minScreenWidth 调整 sap.m.Table 某一列动态显示与否的例子
使用 minScreenWidth 调整 sap.m.Table 某一列动态显示与否的例子
|
12月前
|
敏捷开发 前端开发 开发者
【RaETable】🚀🚀🚀告别Form,RaETable表格列宽度支持拖动调整了,附带原理说明
【RaETable】🚀🚀🚀告别Form,RaETable表格列宽度支持拖动调整了,附带原理说明
|
XML JavaScript 前端开发
SAP UI5 响应式表格 sap.m.Table 根据不同宽度的屏幕动态决定显示或隐藏 Column 的实现源代码讲解试读版
SAP UI5 响应式表格 sap.m.Table 根据不同宽度的屏幕动态决定显示或隐藏 Column 的实现源代码讲解试读版
|
JSON JavaScript 前端开发
用 SAP UI5 Select 控件(下拉列表),来驱动表格控件(Table)刷新的一个实战例子试读版
用 SAP UI5 Select 控件(下拉列表),来驱动表格控件(Table)刷新的一个实战例子试读版
|
容器
Echarts实战案例代码(30):同一个id空间Tab按钮显示不同图表防止叠加的解决方案
Echarts实战案例代码(30):同一个id空间Tab按钮显示不同图表防止叠加的解决方案
92 0
|
存储 API
【ElementUI】Table表格动态合并
【ElementUI】Table表格动态合并
224 0
|
存储 JavaScript 前端开发
vue前端实现配置化表格el-table列的隐藏与展示(具有记忆功能)
vue前端实现配置化表格el-table列的隐藏与展示(具有记忆功能)
706 0