JS使用填报页面的控件查询

  • 文档创建者:cherishdqy
  • 编辑次数:17次
  • 最近更新:RosieY 于 2020-12-01
  • 1. 概述

    1.1 预期效果

    在设计报表的过程中,有部分需求需要使用填报控件来实现查询的功能。如下图所示,下拉框选择地区后列表自动过滤显示所选地区的数据。

    222

    1.2 实现方法

    在参数界面添加「下拉框控件」并隐藏,在报表页面添加同样的「下拉框控件」,为其添加编辑后事件将该控件的值赋值给参数界面的控件,并执行查询。

    2. 示例

    2.1 新建报表

    2.1.1 新建数据集

    新建普通报表,新建数据集 ds1 ,SQL 语句为:SELECT * FROM 销量 where 1=1 ${if(len(area)==0,"","and 地区='" + area + "'")} 

    如下图所示:

    1578559874457566.png

    2.1.2 设计模板

    将数据集的字段拖入单元格中,并在 C2 单元格添加一个选择地区的下拉框控件,如下图所示:

    1578561941267217.png

    2.1.3 设置控件属性

    1)选中单元格中添加的下拉框控件,点击控件设置,设置下拉框控件名为 area,设置控件数据字典为销量表中的地区字段,如下图所示:

    1578560980996882.png

    2)选择模板>模板 Web 属性>填报页面设置,取消勾选未提交离开提示,并勾选直接显示控件,如下图所示:

    1578562160218322.png

    2.2 设置参数界面

    1)编辑参数界面,添加一个下拉框控件,控件名为 area,设置控件不可见,如下图所示:

    1578561301933160.png

    2)点击参数界面空白处,取消勾选点击查询前不显示报表内容,如下图所示:

    1578561462901400.png

    3)选中参数面板后,将鼠标放到参数面板的下边框,出现双向箭头,按住鼠标左键拖动至顶端,将参数面板的高度设置为 0,隐藏参数面板。如下图所示:

    image.png

    2.3 添加编辑后事件

    选中填报控件,添加编辑后事件,输入 JavaScript 代码,如下图所示:

    1578561694472912.png

    JavaScript 代码如下:

    /*获取单元格C2选择的地区控件的值*/
    var area1=this.getValue();
    /*获取参数面板中的下拉框控件*/
    var area2 = contentPane.parameterEl.getWidgetByName("area");
    /*给参数面板中的下拉框控件赋值*/
    area2.setValue(area1);
    /*执行查询*/
    _g().parameterCommit();

    2.4 预览效果

    2.4.1 PC端

    保存模板,选择填报预览,PC 端预览效果如1.1 预期效果所示。

    注:当参数面板中有控件时,预览报表默认会显示一个向下的三角按钮,若需隐藏可参考:JS 隐藏参数界面向上向下的三角按钮

    2.4.2 移动端

    App 及 HTML5 效果如下图所示:

    2020-12-01_11-29-15.gif

    3. 模板下载

    已完成的模板,可参见:%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\JS\填报预览JS实例\33-JS使用填报页面的控件查询.cpt

    点击下载模板:33-JS使用填报页面的控件查询.cpt

    附件列表


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