反饋已提交
網絡繁忙
模板维度、数据较多,又不希望模板页面过长时,可使用 Tab 块,手动切换维度,且可以展示每个维度的标题。
同一个页面有多个明细数据表,不希望每一个都平铺展示出来,可使用 Tab 块,根据实际需要展示数据。
Tab 块可实现多维度切换,如下图所示:
注:决策报表中才能使用 Tab 块。
1)在 FineReport 设计器中点击文件>新建决策报表。
2)将「空白块」中的 Tab 块拖入到决策报表中,如下图所示:
点击右侧的按钮可以新增 Tab,如下图所示:
默认提供一个显示在上方的 Tab 切换样式,点击 Tab 标题按钮,显示对应 Tab 主体。设计器中正在编辑的按钮,默认显示为灰色,如下图所示:
如下图所示:
有时在制作一张决策报表后,发现少了部分内容,需要重新插入 Tab 块加以补充完整。但 Tab 块默认是自动添加在最后面的。
右键点击需要移动的 Tab 页,会弹出四个选项:移动到首位,往前移动,往后移动和移动到末尾。如下图所示:
Tab 块分为3个层级,可以分别设置属性:
tablayout 是 Tab 块的整体布局
tabpane 是容纳 Tab 页标签的面板
Tab 是每个 Tab 标签页,包括 Tab 按钮、Tab 标签页所在的空白设计区域
tablayout 属性如下图所示:
具体设置如下表所示:
Tab 块的名称,可自定义修改,但不支持为空或重复
可设置 Tab 块的渲染风格、边框粗细、边框颜色、主体背景、背景透明度等,如下图所示:
勾选开启轮播后,Tab 页会开启轮播,可以设置轮播间隔,默认为1.8 s
注1:也可以通过添加初始化后事件来实现 Tab 轮播,详情请参见:JS 实现决策报表 Tab 块轮播
注2:移动端不支持Tab 轮播
tabpane PC 端属性如下图所示:
具体属性如下图所示:
通过修改控件大小,可自定义 Tab 标签面板的高度
也可以通过拖拽来调整Tab标题块的高度,如下图所示:
注1:Tab 标题块纵向排列时,可同理设置宽度
注2:控件大小不可以超出 tablayout 的高度范围
注3:控件大小为 0 ,或拖动标题组件到上下线重合时,即可隐藏 Tab 标题
tabpane 移动端属性如下图所示:
移动端 Tab 组件样式包含上菜单式、下菜单式、滑动式、联排式,具体设置请参见:[通用]Tab 组件多样化
当前编辑 Tab 属性界面如下图所示:
「可见」按钮默认勾选
取消勾选后,设计器界面按钮灰化,预览模板时该 Tab 和 Tab 中的内容不可见
注:模板导出时,被隐藏的 Tab 不会被导出。例如:排在首位的 Tab 被隐藏,则导出时导出排在第二位的 Tab
可以修改 Tab 初始、鼠标悬浮、鼠标点击的背景颜色
注1:移动端只支持设置「初始背景」和「鼠标点击背景」为颜色。若设置为图片,则显示为默认颜色
注2:移动端不支持设置鼠标悬浮背景
Tab 主体部分,默认都是自适应布局,可以设置内边距
默认 Tab 页的上下左右内边距都为 0
每个 Tab 页可以设置不同的内边距
在决策报表中点击模板>表单报表块自适应属性, 如下图所示:
注:更多自适应属性内容请参见:自适应属性
选择不同的自适应属性时, Tab 页的加载逻辑不同,详情如下表所示:
「表单报表块自适应属性」中表格选择默认时
后台:加载全部 Tab
前端:只加载第一个 Tab 的前端元素,切换到第二个 Tab 再加载第二个 Tab
「表单报表块自适应属性」中表格不选择默认时
前端:加载所有 Tab
可以通过 JavaScript 控制 Tab 布局显示哪个 Tab,当前控件选择 Tab 组件,添加一个初始化后事件:
this.options.form.getWidgetByName('cardlayoutname').showCardByIndex(index)
注:cardlayoutname 为 Tab 块名称,默认为 tabpane0;index 为标题索引。
JS 示例请参见:超链切换 Tab 标签
可以通过 JavaScript 控制部分 Tab 标题块隐藏,当前控件选择 Tab 组件,添加一个初始化后事件:
this.options.form.getWidgetByName("tabpane0").setTabVisible("tab1", false)
注:“Tab1”在模板中不能重名。当模板导出时,被隐藏的 Tab 不会被导出。
JS 示例可参见:JavaScript 实现隐藏 Tab 块标题
文 檔回 饋
滑鼠選中內容,快速回饋問題
滑鼠選中存在疑惑的內容,即可快速回饋問題,我們將會跟進處理。
不再提示
10s後關閉