反馈已提交

网络繁忙

决策报表控件实现点击查询按钮后才能查询

  • 文档创建者:星踪
  • 历史版本:17
  • 最近更新:Tracy.Wang 于 2024-10-12
  • 1. 概述

    1.1 预期效果

    在决策报表 body 中使用控件查询数据时,若其他组件引用了控件名称作为参数,那么控件在选择查询参数后点击「确定」或点击空白处,会立即触发查询动作。如下图所示:

    DCC4B849-D301-4CEC-B4C0-0D5DE1CB239D.GIF

    但有时候希望它不会自动查询,而是通过点击「查询按钮」来触发查询动作。如下图所示:

    A4808C25-41F3-462D-B3C5-08640667910C.GIF

    1.2 解决思路

    在控件的「编辑结束」事件里用 return false; 阻止原有的查询效果,然后在查询按钮里用 gotoPage 去刷新报表块并实现传参效果。

    注:文本控件需使用「编辑后」事件。

    2. 下拉框示例

    2.1 准备模板

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

    2)点击顶部菜单栏「模板>PC端自适应属性」,将报表布局设置为「绝对布局」。如下图所示:

    Snag_7b38a206.png

    2.2 设计报表

    1)向 body 中分别拖入标签控件、下拉复选框控件、按钮控件、报表块,调整到合适大小和布局。最终效果如下图所示:

    Snag_7b3e628f.png

    2)本例中「下拉复选框控件」返回值为「数组」,那么给报表块的 A1 单元格添加公式 split($a,",") ,表示返回由逗号分割的字符串数组。再设置「单元格属性>扩展」中的扩展方向为「纵向扩展」,那么下拉框多选时,返回的值可纵向排列展示。

    Snag_7b81c5b8.png

    2.3 设置标签控件

    选中标签控件,设置控件值为字符串 序列查询: ,如下图所示:

    Snag_7b4089e3.png

    2.4 设置下拉框复选控件

    1)选中「下拉复选框控件,设置控件名称为 a ,数据字典类型为「自定义」。如下图所示:

    Snag_7b44b6cc.png

    2)在事件中添加一个编辑结束事件,输入 JavaScript 代码:

    return false;

    如下图所示:

    Snag_7b71e9b8.png

    2.5 设置按钮控件

    1)选中按钮控件,将按钮名字修改为「查询」。

    注:控件工具栏中的「查询按钮」控件只能在参数面板中使用,所以这里用「按钮控件」来实现查询按钮。

    Snag_7b6b691c.png

    2)添加一个点击事件,输入 JavaScript 代码如下:

    var a=_g().getWidgetByName('a').getValue();  // 获取下拉复选框控件 a 的值
    _g().getWidgetByName("report0").gotoPage(1,"{a:'"+a+"'}",true);  //将 a 的值作为参数传递给 report0 报表块

    注1:若需要传递多个参数,gotoPage 写法为 gotoPage(1,"{a:'参数值', b:'参数值'}",true) 。

    注2:重新计算模板中所有报表块,对服务器有一定的压力,不适用于高频触发的场景。

    注3:若要传参给图表块,可使用接口 changeParameter ,输入 JavaScript 代码如下:

    var a=_g().getWidgetByName('a').getValue();
    FR.Chart.WebUtils.changeParameter({chartID: 'chart0',para: "{a:'"+a+"'}"})

    如下图所示:

    Snag_7b735435.png

    2.6 效果预览

    保存报表,点击「PC端预览」,效果如 1.1 节预期效果所示。

    注:不支持移动端。

    3. 复选框联动筛选示例

    当下拉复选框的字符串分隔符为',',在使用点击「查询按钮」赋值到对应报表块的传参操作时,参数的数据格式是 json 格式,不支持直接使用 ',' 作为分隔符。因此,参数值无法传入对应的报表单元格,导致无法进行联动筛选。

    可以通过更改「下拉复选框>属性>分隔符」「模板数据集>编辑>参数」实现。

    3.1 准备模板

    点击设计器左上角「文件>新建决策报表」,新建空白模板。点击顶部菜单栏「模板>PC端自适应属性」,将报表布局设置为「绝对布局」。

    3.2 设计报表

    1)向 body 中分别拖入标签控件、下拉复选框控件、按钮控件、报表块,调整到合适大小和布局。

    2)新建数据集 ds1 , SQL 查询语句为:

    SELECT * FROM Air_Accidents

    where Regions in('${reg}')

    611-1111.png

    如下图设计表格,将数据集中的字段分别拖拽到对应单元格中。

    167.png

    3.3 设置下拉复选框控件

    选中下拉复选框控件,设置控件名称为 ucompany ,数据字典类型为「数据库表」。如下图所示:

    611-1101.png

    3.4 设置按钮控件

    选中按钮控件,将按钮名字修改为「查询」,添加一个点击事件,输入 JavaScript 代码如下:

    var a = _g().getWidgetByName('ucompany').getValue();
    _g().getWidgetByName("report0").gotoPage(1, "{ucompany:'" + a + "'}", true);

    如下图所示:

    617-954.png

    3.5 设置分隔符和数据集参数

    选中「下拉复选框控件」,点击顶部菜单栏「属性>返回值类型」,选择「字符串」,将分隔符改成 , 

    点击左侧「模板数据集>编辑」,将数据集传参查询位置改成REPLACE($a,",","','"),将,替换成','

    651149.png

    注:也可将「下拉复选框控件」分隔符改成 |,| 。数据集传参查询位置改成 REPLACE($a,"|,|","','")。或将「下拉复选框控件」分隔符改成 "," 。数据集传参查询位置改成 REPLACE($a,"\",\"","','")。

    3.6 效果预览

    166.gif

    4. 模板下载

    附件列表


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

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

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

    不再提示

    10s后关闭



    AI

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