反馈已提交

网络繁忙

当前为10.0版本文档,只有最新版本的文档支持在线编辑修改,如果想创建/编辑文档,请移步至 最新版帮助文档

Tab块

  • 文档创建者:文档助手1
  • 历史版本:45
  • 最近更新:Suki陈 于 2023-01-03
  • 1. 概述

    1.1 应用场景

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

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

    1.2 功能简介

    针对您想要分析的某组数据,可以从使用 Tab 设置多个 Tab,分别从多个维度来分析这组数据,查看时切换 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 组件,添加一个初始化后事件:

    例如:决策报表中展示 tablayout0 对应的 Tab 块的第 2 个 Tab 页,代码如下:

    setTimeout(function(){
    _g().getWidgetByName("tabpane0").showCardByIndex(1);
      }, 50)

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

    5.2 隐藏某个 Tab 页

    可以通过 JavaScript 隐藏掉某个 Tab 页,当前控件选择 Tab 组件,添加一个初始化后事件:

    例如:决策报表中隐藏 tabpane0 中名为“Tab1”的 Tab 页:

    setTimeout(function(){
    _g().getWidgetByName("tabpane0").setTabVisible("Tab1", false);
      }, 50)

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

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

    6. 索引

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

    附件列表


    主题: 决策报表应用
    已经是第一篇
    已经是最后一篇
    • 有帮助
    • 没帮助
    • 只是浏览

    售前咨询电话

    400-811-8890转1

    在线技术支持

    请前往「服务平台」,选择「在线支持」

    热线电话:400-811-8890转2

    总裁办24H投诉

    热线电话:173-1278-1526