反馈已提交

网络繁忙

JS实现参数组合筛选的前进和后退

  • 文档创建者:chuzhihao
  • 历史版本:8
  • 最近更新:Wendy123456 于 2022-03-29
  • 1. 概述

    1.1 应用场景

    在一些特定场合下当参数过多时用户进行参数组合筛选需要不断自行调整控件值,会使参数筛选过滤变得很麻烦。

    因此有的用户想要实现参数筛选后自动保存参数组合,然后通过点击按钮实现参数组合筛选的前进和后退功能。效果如下图所示:

    1.2 实现思路

    通过定义模板二维字符数组和数组索引来保存已经进行了筛选的参数组合,然后通过数组索引来确定前进和后退的位置,进而取到相应的参数组合。

    2. 示例

    2.1 数据准备

    新建数据集 ds1,数据库查询语句为:

    SELECT * FROM 销量

    WHERE 地区 = '${DIQU}'

    AND 销售员 = '${SALES}'

    2.2 报表设计

    1)新建决策报表,添加参数面板和相关控件,body 组件中添加一个报表块,表格设计如下图所示:

    2)在参数面板中添加参数控件 DIQU 和 SALES,选择控件类型为「下拉框控件」。如下图所示:

    3)分别为其绑定数据字典为 FRDemo 销量表的地区和销售员字段。如下图所示:

    4)在参数面板上添加三个「按钮控件」,分别命名为 resert ,back ,forward。如下图所示:

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

    最终报表样式如下图所示:

    2.3 添加JS事件 

    1)参数面板定义模板全局二维字符串数组和数组索引,保证该数据可以在模板的任意一个 function 中都可以直接调用。使用 window 定义数组,其中的值可以自行任意定义。

    JavaScript 代码如下:

    window.str = [["华东","孙林"],["华北","王伟"]]
    window.index = 0;

    2)在查询按钮中添加点击事件来保存每一次筛选后的参数组合值到二维字符数组中。

    JavaScript 代码如下:

    index = index + 1;
    //获取控件中的参数值
    var para1 = _g().getParameterContainer().getWidgetByName("DIQU").getValue();
    var para2 = _g().getParameterContainer().getWidgetByName("SALES").getValue();
    //将参数组合保存在二维数组中
    str[index-1] = [para1,para2];

    3)在 back 控件中加入后退的 JS 点击事件,先获取字符串数组中的索引参数组合,然后将其赋值给控件,最后调用参数提交。

    JavaScript 代码如下:

    //获取二维字符数组中的索引参数组合
    var para1 = str[index-2][0];
    var para2 = str[index-2][1];
    //将参数组合赋值给参数控件
    _g().getParameterContainer().getWidgetByName("DIQU").setValue(para1);
    _g().getParameterContainer().getWidgetByName("SALES").setValue(para2);
    index = index - 1;
    _g().parameterCommit();

    4)在 forward 按钮控件中加入参数组合前进的JS事件,同样先获取字符串数组中的索引参数组合,然后将其赋值给控件,最后调用参数提交。

    JavaScript 代码如下:

    var para1 = str[index][0];
    var para2 = str[index][1];
    _g().getParameterContainer().getWidgetByName("DIQU").setValue(para1);
    _g().getParameterContainer().getWidgetByName("SALES").setValue(para2);
    index = index + 1;
    _g().parameterCommit();

    5)在 reset 按钮中给参数赋初始值然后调用参数提交即可,此处的输出值可以自由定义。

    JavaScript 代码如下:

    //赋予初值
    _g().getParameterContainer().getWidgetByName("DIQU").setValue("华北");
    _g().getParameterContainer().getWidgetByName("SALES").setValue("王伟");
    //参数提交
    _g().parameterCommit();

    2.4 效果预览

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

    注1:不支持移动端。

    注2:该数组索引 JS 代码中没有加入数组索引小于0和大于数组最大值后的判断机制,因此当索引大于二维数组最大值或者小于最小值的时候会出现报错情况,使用模板的人可以根据实际情况自行加入判断保护机制来防止模板报错。

    3. 模板下载

    已完成模板可参见:%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\JS\表单JS实例\JS实现参数组合筛选的前进和后退.frm

    点击下载模板:JS实现参数组合筛选的前进和后退.frm


    附件列表


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

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

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

    不再提示

    10s后关闭

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