Tab块

  • 文档创建者:文档助手1
  • 编辑次数:38次
  • 最近更新:Carly 于 2020-09-16
  • 1. 概述

    1.1 应用场景

    • 模板维度、数据较多,又不希望模板页面过长时,可使用 Tab 块,手动切换维度,且可以展示每个维度的标题。

    • 同一个页面有多个明细数据表,不希望每一个都平铺展示出来,可使用 Tab 块,根据实际需要展示数据。

    1.2 功能简介

    Tab 块可实现多维度切换,如下图所示:

    3.gif

    2. Tab 布局

    2.1 新建 Tab 块

    注:决策报表中才能使用 Tab 块。

    1)在 FineReport 设计器中点击文件>新建决策报表

    2)将「空白块」中的 Tab 块拖入到决策报表中,如下图所示:

    4.png

    2.2 新增 Tab 页

    点击右侧的6.png按钮可以新增 Tab,如下图所示:

    7.png

    2.3 切换 Tab 页

    默认提供一个显示在上方的 Tab 切换样式,点击 Tab 标题按钮,显示对应 Tab 主体。设计器中正在编辑的按钮,默认显示为灰色,如下图所示:
    8.png

    2.4 删除 Tab 页

    如下图所示:
    8.png

    2.5 移动 Tab 页

    有时在制作一张决策报表后,发现少了部分内容,需要重新插入 Tab 块加以补充完整。但 Tab 块默认是自动添加在最后面的。

    右键点击需要移动的 Tab 页,会弹出四个选项:移动到首位往前移动往后移动移动到末尾。如下图所示:

    9.png

    3. Tab 属性

    Tab 块分为3个层级,可以分别设置属性:

    • tablayout 是 Tab 块的整体布局

    • tabpane 是容纳 Tab 页标签的面板

    • Tab 是每个 Tab 标签页,包括 Tab 按钮、Tab 标签页所在的空白设计区域

    3.1 Tab 块

    tablayout 属性如下图所示:

    image.png

    具体设置如下表所示:

    属性
    简介
    组件名称Tab 块的名称,可自定义修改
    样式

    可设置 Tab 块的渲染风格、边框粗细、边框颜色、主体背景、背景透明度等,如下图所示:

    image.png

    Tab 轮播

    勾选开启轮播后,Tab 页会开启轮播,可以设置轮播间隔,默认为1.8 s

    注1:也可以通过添加初始化后事件来实现 Tab 轮播,详情请参见:JS 实现决策报表 Tab 块轮播

    注2:移动端不支持Tab 轮播

    组件大小设置 Tab 块的宽度和高度

    3.2 Tab 标签面板

    3.2.1 PC 端

    tabpane PC 端属性如下图所示:

    image.png

    具体属性如下图所示:

    属性简介
    组件名称Tab 标签面板的名称,可自定义修改
    样式模板默认image.png
    卡片式image.png
    锦旗image.png
    书签式image.png
    菜单式image.png
    五边形image.png
    梯形image.png
    显示位置Tab 标签面板的位置可选择:上、下、左、右
    背景/字体自定义 Tab 标题背景、Tab 标题字号、字体等
    文本方向横排image.png
    纵排image.png
    坐标尺寸

    通过修改控件大小,可自定义 Tab 标签面板的高度

    也可以通过拖拽来调整Tab标题块的高度,如下图所示:

    1591855905456805.png

    注1:Tab 标题块纵向排列时,可同理设置宽度

    注2:控件大小不可以超出 tablayout 的高度范围

    注3:控件大小为 0 ,或拖动标题组件到上下线重合时,即可隐藏 Tab 标题

    3.2.2 移动端

    tabpane 移动端属性如下图所示:

    移动端 Tab 组件样式包含上菜单式下菜单式滑动式联排式,具体设置请参见:[通用]Tab 组件多样化

    image.png

    3.3 Tab 页

    当前编辑 Tab 属性界面如下图所示:

    image.png

    具体设置如下表所示:

    属性
    简介
    组件名称Tab 的控件名,默认为 Tab0,后面序号依次增长
    可见

    「可见」按钮默认勾选

    取消勾选后,设计器界面按钮灰化,预览模板时该 Tab 和 Tab 中的内容不可见

    注:模板导出时,被隐藏的 Tab 不会被导出。例如:排在首位的 Tab 被隐藏,则导出时导出排在第二位的 Tab。

    样式

    可以修改 Tab 初始、鼠标悬浮、鼠标点击的背景颜色

    注1:移动端只支持设置「初始背景」和「鼠标点击背景」为颜色。若设置为图片,则显示为默认颜色。

    注2:移动端不支持设置鼠标悬浮背景

    内边距

    Tab 主体部分,默认都是自适应布局,可以设置内边距

    • 默认 Tab 页的上下左右内边距都为 0

    • 每个 Tab 页可以设置不同的内边距

    组件间隔和内边距一样,每个 Tab 主体部分可以设置各自的内部组件间隔
    标题当前编辑的 Tab 的标题,可以修改当前编辑 Tab 的标题名,修改后设计区域会及时体现

    4. Tab 页加载逻辑

    在决策报表中点击模板>表单报表块自适应属性, 如下图所示:

    注:更多自适应属性内容请参见:自适应属性

    1591858895206593.png

    选择不同的自适应属性时, Tab 页的加载逻辑不同,详情如下表所示:

    表格自适应属性
    加载逻辑
    选择「默认」

    「表单报表块自适应属性」中表格选择默认

    • 后台:加载全部 Tab

    • 前端:只加载第一个 Tab 的前端元素,切换到第二个 Tab 再加载第二个 Tab 

    不选择「默认」

    「表单报表块自适应属性」中表格不选择默认

    • 后台:加载全部 Tab 

    • 前端:加载所有 Tab 

    5. Tab 块 JS 接口

    5.1 Tab 组件显示

    可以通过 JavaScript 控制 Tab 布局显示哪个 Tab,当前控件选择 Tab 组件,添加一个初始化后事件:

    this.options.form.getWidgetByName('cardlayoutname').showCardByIndex(index)

    注:cardlayoutname 为 Tab 块名称,默认为 tabpane0;index 为标题索引。

    JS 示例请参见:超链切换 Tab 标签

    5.2 Tab 标题隐藏

    可以通过 JavaScript 控制部分 Tab 标题块隐藏,当前控件选择 Tab 组件,添加一个初始化后事件:

    this.options.form.getWidgetByName("tabpane0").setTabVisible("tab1", false)

    注:“Tab1”在模板中不能重名。当模板导出时,被隐藏的 Tab 不会被导出。

    JS 示例可参见:JavaScript 实现隐藏 Tab 块标题

    6. 索引

    序号
    简介参考文档
    1移动端 Tab 组件样式介绍,组件样式包含上菜单式、下菜单式、滑动式、联排式[通用]Tab 组件多样化
    2通过 JS 隐藏 Tab 标题JS 实现隐藏 Tab 块标题
    3通过 JS 语句隐藏部分 Tab 标题[通用]JS 隐藏部分 Tab 标题
    4通过数据库表中设置的字段值,控制决策报表的每个 Tab 块是否显示数据库表字段控制 Tab 块隐藏
    5切换 Tab 时,参数面板中的部分参数隐藏JS 实现切换 Tab 显示/隐藏参数面板上的控件
    6点击报表块单元格的超级链接,实现 Tab 块的切换JS 实现点击超链切换 Tab 页
    7通过 JS 实现跳转到指定 Tab 页的效果[通用]JS 跳转指定 Tab 块
    8JS 实现点击查询后停留在当前查询的 Tab 页JS 实现点击查询后停留在当前查询的 Tab 页
    9多 Tab 的决策报表,使用 JS 实现固定时间间隔内自动循环跳转JS 实现决策报表 Tab 块轮播
    10提供更多 Tab 轮播效果,例如横向滚动效果、上下滚动等轮播效果决策报表 Tab 块轮播特效插件

    附件列表


    主题: 决策报表应用
    • 有帮助
    • 没帮助
    • 只是浏览
    • 评价文档,奖励 1 ~ 100 随机 F 豆!