反馈已提交

网络繁忙

数据库表字段控制Tab块隐藏

  • 文档创建者:L大大
  • 历史版本:11
  • 最近更新:Carly 于 2023-01-29
  • 1. 概述

    1.1 预期效果

    通过数据库表中设置的字段值,控制决策报表的每个 Tab 块是否显示,如下图所示:

    数据库表字段:SITUATION 字段的值控制 Tab 是否显示。

    Snag_575189d.png

    效果展示:一共有 4 个 Tab 块:春、夏、秋、冬,前端展现时只显示其中 2 个。

    E9CF8C4D-1DBD-4367-9BC6-93A8BA64CF71.GIF

    1.2 实现思路

    在数据库表中添加控制 Tab 块是否显示的权限值,给决策报表的 body 组件添加 JS 事件来实现。

    2. 示例

    2.1 数据准备

    首先请自己在本地数据库中新建一个表,表名为 SEASON,包含两个字段为 TYPE 和 SITUATION 。表样式如下图所示:

    注:可使用 Navicat 新增数据库表,详细操作请自行百度。

    Snag_58260e2.png

    2.2 模板设计

    1)在设计器中点击左上角「文件>新建决策报表>新建空白模板」。

    2)将模板「PC端自适应属性」中的报表布局方式修改为「绝对布局」。如下图所示:

    注:11.0.3 版本之前的设计器中,布局方式在设计画布右侧,body 组件属性面板中设置。

    Snag_91c59d9.png

    3)拖入一个 Tab块,新增 4 个 Tab 页。每个 Tab 页中均拖入一个 报表块 。给 Tab 页标题分别设置为「春、夏、秋、冬」。报表块内容可自行设置。

    如下图所示:

    Snag_9284869.png

    2.3 添加JS事件

    选中 body 组件,添加一个初始化后事件,如下图所示:

    Snag_92b42fc.png

    事件中,首先添加一个参数 a  ,参数值为公式 :split(SQL("FRDemo","SELECT TYPE FROM SEASON WHERE SITUATION='隐藏'",1),",")

    公式说明:通过 SQL 查询和 split 分割公式将需要字段值为「隐藏」的 Tab 块标题存成一个数组。获取到TYPE中为隐藏的值,并形成数组:[秋,冬]。

    再输入 JavaScript 代码:

    setTimeout(function(){
    for(var i = 0; i < a.length; i++) { 
        for(var j=0;j<= a[i].length;j++){ 
        _g().getWidgetByName("tabpane0").setTabVisible(a[j],false);
        }
    }
      }, 50)

    2.4 效果预览

    2.4.1 PC 端

    保存报表,点击PC端预览,效果如下图所示:

    E9CF8C4D-1DBD-4367-9BC6-93A8BA64CF71.GIF

    2.4.2 移动端

    同时支持 App 和 H5 端预览。效果如下图所示:

    1589511793864763.gif

     3. 模板下载 

    已完成模板可参见:%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\JS\表单JS实例\数据库表字段控制是否显示Tab.frm

    点击下载模板:数据库表字段控制是否显示Tab.frm

    注:用户使用该模板时需要先新建数据库表。

    附件列表


    主题: 决策报表应用
    • 有帮助
    • 没帮助
    • 只是浏览
    中文(简体)

    鼠标选中内容,快速反馈问题

    鼠标选中存在疑惑的内容,即可快速反馈问题,我们将会跟进处理。

    不再提示

    10s后关闭

    联系我们
    在线支持
    获取专业技术支持,快速帮助您解决问题
    工作日9:00-12:00,13:30-17:30在线
    页面反馈
    针对当前网页的建议、问题反馈
    售前咨询
    采购需求/获取报价/预约演示
    或拨打: 400-811-8890 转1
    qr
    热线电话
    咨询/故障救援热线:400-811-8890转2
    总裁办24H投诉:17312781526
    提交页面反馈
    仅适用于当前网页的意见收集,帆软产品问题请在 问答板块提问前往服务平台 获取技术支持