反饋已提交

網絡繁忙

當前為10.0版本文檔，更多實例內容將在最新幫助文檔中展現，點選跳轉至 最新版幫助文檔

Pad自适应

1. 概述

1.1 版本

报表设计器版本
App
HTML5 移动端展现插件
10.0V10.0V10.0

1.2 应用场景

移动办公场景下，用户携带电脑非常不便，手机查看工程阅读困难，Pad成为了最佳的移动办公设备。

为了减少开发和维护耗时，手机和Pad端往往共用一套模板，两者分别自适应展示即可。

1.3 功能简介

对于移动端决策报表，配置了 移动端自适应 后，Pad 端可自适应展示，与手机端略有不同。

2. Body 组件

移动端布局
body布局组件缩放
预览效果
重布局--一行一个组件，可能出现上下滚动条
保留布局自适应布局横向自适应宽高等比例缩放，横向自适应充满，纵向可能出现滚动条
双向自适应宽高等比例缩放，横向/纵向自适应充满
绝对布局
固定大小裁剪四周空白部分后，宽高等比例缩放，横向自适应充满，纵向可能出现滚动条
适应区域裁剪四周空白部分后，宽高等比例缩放，横向/纵向自适应充满

3. 报表块

3.1 移动端重布局

3.1.1 组件预览效果

是否单个报表块
报表块自适应预览效果
是
-单个报表块充满body
否横向自适应宽度充满，高度自适应，支持最大高度限制
纵向自适应有最大高度限制
双向自适应宽高自适应充满，支持最大高度限制
不自适应高度自适应，支持最大高度限制

3.1.1 组件冻结效果

报表块自适应模板中是否仅单个报表块组件是否限高行冻结效果列冻结
横向自适应是-支持不支持
否是支持
否不支持
纵向自适应--不支持支持
双向自适应--不支持不支持
不自适应是
-支持支持
否是支持
否不支持

3.2 移动端保留布局

3.2.1 组件预览效果

body布局组件缩放报表块是否占据整行报表块自适应预览效果
自适应布局横向自适应是横向自适应宽度充满，高度自适应，支持最大高度限制
纵向自适应有最大高度限制
双向自适应宽高自适应充满，支持最大高度限制
不自适应高度自适应，支持最大高度限制
否-和pc端一致，宽高按比例分配
双向自适应--
绝对布局---

3.2.2 组件冻结效果

分类报表块自适应是否限高行冻结
列冻结
组件横向自适应，且报表块为单行报表块
横向自适应
是支持不支持
否不支持
纵向自适应-不支持支持
双向自适应-不支持不支持
不自适应是支持支持
否不支持
其他情况下横向自适应-支持不支持
纵向自适应-不支持支持
双向自适应-不支持不支持
不自适应-支持支持

4. 图表块

4.1 移动端重布局

图表宽高预览效果
表单画布宽度≤高度-横向充满，宽高等比缩放

表单画布宽度>高度

图表宽度≤设备宽度横向充满，宽高等比放大
图表宽度>设备宽度

面积相等原则，高度拉长

若有最大高度限制，最大高度为显示区域的80%

单个图表块-充满屏幕

4.2 移动端保留布局

布局样式预览效果
横向自适应

若图表块与其他组件并列一行，与 PC 端一致，宽高等比缩放

若图表块占据整行，高度自适应，与报表块效果一致

双向自适应与 PC 端一致，宽高按比例分配
固定大小
适应区域

5. 控件

5.1 移动端重布局

控件预览效果
标签控件内容自适应高度
文本域控件固定高度
单选按钮组/复选框组（内容≤5项）内容自适应高度
单选按钮组/复选框组（内容>5项）固定高度，内容可滚动
其他控件固定高度

5.2 移动端保留布局

分类控件预览效果

自适应布局-横向自适应

绝对布局-固定大小

标签控件控件宽高等比缩放，内容超出显示区域可滚动
文本域控件控件宽高等比缩放，内容超出显示区域可滚动
单选按钮组/复选框组

控件宽高等比缩放

超出显示区域可滚动，不足显示区域则根据内容自适应高度

其他控件

控件宽高等比缩放

但有最大和最小高度显示，宽度中控件内容显示不下则截断

自适应布局-双向自适应

绝对布局-适应区域

标签控件控件宽高按比例分配，内容超出显示区域可滚动
文本域控件控件宽高按比例分配，内容超出显示区域可滚动
单选按钮组/复选框组

控件宽高按比例分配

超出显示区域可滚动，不足显示区域则根据内容自适应高度

其他控件

控件宽高按比例分配

但有最大和最小高度显示，宽度中控件内容显示不下则截断

6. Tab块

6.1 移动端重布局

是否单个

 Tab块

Tab中是否

为单个组件

Tab 预览效果Tab 中组件预览效果
是是单个 Tab块自适应充满，高度固定按照对应组件在重布局下单个组件的显示的效果来显示
是否单个 Tab块自适应充满，高度固定

按照对应组件在重布局下非单个组件的显示的效果来显示

高度超出屏幕则在 Tab 里出现上下滚动条

否-

Tab 块的显示高度根据当前Tab页中的组件内容自适应，Tab内无滚动条

切换 Tab 页，可能会引起tab高度的变化

按照对应组件在重布局下非单个组件的显示的效果来显示

6.2 移动端保留布局

布局样式tab预览效果
横向自适应

  • 若Tab 块单独成行，Tab 块中报表块单独成行，根据当前 Tab 页中的组件内容自适应，Tab 内没有滚动条

  • 其他情况下，Tab 块宽高等比缩放，Tab 内没有滚动条

双向自适应Tab块宽高按比例分配，Tab内没有滚动条
固定大小Tab块宽高等比缩放，Tab内没有滚动条
适应区域Tab块宽高按比例分配，Tab内没有滚动条

7. 组件隐藏

7.1 普通隐藏

图表块、报表块、控件的 PAD 端隐藏情况如下表所示：

注：Tab块不支持隐藏。

是否可见布局样式预览效果
可见-组件正常显示
不可见重布局组件隐藏，不占位
不可见绝对布局组件隐藏，占位
不可见自适应布局

组件隐藏，组件位置会被周围组件自适应充满，组件不占位

7.2 JS 隐藏组件

JS 控制组件是否可见，PAD 端生效情况如下表所示：

布局样式控件位置JS事件触发效果
重布局-

JS可以控制组件可见不可见

当不可见时下方组件自动向上填充

保留布局-横向自适应控件占整行
控件不占整行

JS可以控制组件可见不可见

当不可见时组件位置留空，其他组件不会自适应充满

保留布局-双向自适应-
保留布局-固定大小-
保留布局-适应区域-

7.3 Tab 中组件隐藏

Tab 中的图表块、报表块、控件，PAD 端隐藏情况如下表所示：

是否可见布局样式预览效果
可见-组件正常显示
不可见重布局组件隐藏，不占位
不可见保留布局

组件隐藏，占位

附件列表


主題： 原简体文档
已經是第一篇
已經是最後一篇
  • 有幫助
  • 沒幫助
  • 只是瀏覽
  • 圖片不清晰
  • 用語看不懂
  • 功能說明看不懂
  • 操作說明太簡單
  • 內容有錯誤

文 檔回 饋

滑鼠選中內容，快速回饋問題

滑鼠選中存在疑惑的內容，即可快速回饋問題，我們將會跟進處理。

不再提示

10s後關閉