JS实现开关按钮

  • 文档创建者:星踪
  • 编辑次数:6次
  • 最近更新:Leo.Tsai 于 2020-07-24
  • 1. 概述

    1.1 预期效果

    实现开关按钮,前端预览打开和关闭按钮时,可以跟报表元素联动。例如按钮打开时显示单价列表,关闭时隐藏单价列表,点击禁用开关按钮可以让开关效果失效,如下图所示:

    D94904F9-7FDA-4DAA-BF85-3730D5027592.GIF

    1.2 实现思路

    • 如果是 cpt 报表,直接在模板 Web 属性中引入外部 JavaScript 文件。使用公式实现开关样式,添加点击事件实现开关切换效果。

    • 如果是 frm 报表,需要在 body 初始化事件中写外部 JavaScript 引用。使用公式实现开关样式,添加点击事件实现开关切换效果。

    2. 示例

    2.1 下载文件

    1)点击下载 JavaScript 文件:Qbutton.js

    2)将下载的 JavaScript 文件放到%FR_HOME%\webroot\help\css目录下,如下图所示:

    Snag_61a5e7d.png

    2.2 引用文件

    新建决策报表,在 body 初始化事件中引入上面的 JavaScript 文件,如下图所示:

    Snag_61f5f40.png

    JavaScript 代码如下:

    function dynamicLoadJs(url) {
        var oHead = document.getElementsByTagName('head').item(0);
        var oScript = document.createElement("script");
        oScript.type = "text/javascript";
        oScript.src = url;
        oHead.appendChild(oScript);
    }
    //封装的方法,无需任何改动
    dynamicLoadJs("/webroot/help/css/Qbutton.js");
    //调用方法,参数为js文件路径

    2.3 准备数据

    新建数据查询数据集 ds1 ,SQL 查询语句为:SELECT * FROM S产品 limit 10

    Snag_622c186.png

    2.4 设计报表

    1)决策报表 body 中拖入 3 个组件:报表块 report0 和 report1 ,按钮控件 button0,如下图所示:

    1595578941465447.png

    2)编辑报表块 report0 ,设计表格样式,如下图所示:

    Snag_63f4043.png

    3)编辑报表块 report1,设计表格样式,如下图所示:

    Snag_64156bf.png

    其中,B1 单元格插入公式'<jelly-switch id="Qbutton" checked></jelly-switch>',并用HTML显示内容,通过该公式获取开关的样式,如下图所示:

    • 可选 checked 属性,控制开关按钮显示状态

    • 可选 disabled 属性,控制开关按钮可用状态

    Snag_643f9ad.png

    4)选择按钮控件 button0,设置按钮名字为禁用开关按钮,如下图所示:

    Snag_64de8c4.png

    2.5 开关联动

    body 新增一个初始化事件用于为开关按钮绑定点击事件,获取值并传参给需要联动的组件,切换显示和隐藏单价列,如下图所示:

    Snag_650c688.png

    JavaScript 代码如下:

    setTimeout(function() {
    $("#Qbutton").click(function() {
    //给开关按钮绑定点击事件
    var state = this.checked;
    //获取按钮值,返回true和false
    _g().getWidgetByName("report0").gotoPage(1, "{checked:" + state + "}", true);
    //传参并刷新报表块report0
    if (state) {
    $("#REPORT1 td[id^='A1']").text('显示单价');
    $("#REPORT1 td[id^='A1']").css("color","#11c75d");
    } else {
    $("#REPORT1 td[id^='A1']").text('隐藏单价');
    $("#REPORT1 td[id^='A1']").css("color","#FF4651");
    }
    //动态修改A1内容和字体颜色
    });
    }, 500)

    2.6 禁用按钮

    按钮控件 button0 添加点击事件,实现禁用按钮效果,如下图所示:

    Snag_6542a25.png

    JavaScript 代码如下:

    Qbutton.disabled = true;//开关按钮灰化无法选取

    2.7 效果预览

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

    D94904F9-7FDA-4DAA-BF85-3730D5027592.GIF

    注:不支持移动端。

    3. 模板下载

    已完成模板可参见:%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\JS\表单JS实例\JS实现开关按钮.frm

    点击下载模板:JS实现开关按钮.frm

    点击下载 JavaScript 文件:Qbutton.js

    附件列表


    主题: 二次开发
    • 有帮助
    • 没帮助
    • 只是浏览
    • 评价文档,奖励 1 ~ 100 随机 F 豆!