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

  • 文档创建者:cherishdqy
  • 编辑次数:14次
  • 最近更新:Carly 于 2020-01-09
  • 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 设置填报控件

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

    1578560980996882.png

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

    1578562160218322.png

    2.2 设置参数界面

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

    1578561301933160.png

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

    1578561462901400.png

    将鼠标放到参数面板的下边框出现双向箭头,按住鼠标左键拖动至顶端,将参数面板的高度设置为 0。

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

    2.3 添加编辑后事件

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

    1578561694472912.png

    JavaScript 代码如下:

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

    2.4 预览效果

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

    注:不支持移动端。

    3. 模板下载

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

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

    附件列表


    主题: 二次开发
    • 有帮助
    • 没帮助
    • 只是浏览