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

1.1 预期效果

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

1.2 实现方法

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

2.1 新建报表

2.1.1 新建数据集

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

如下图所示：

2.1.2 设计模板

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

2.1.3 设置控件属性

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

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

2.2 设置参数界面

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

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

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

2.3 添加编辑后事件

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

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 预期效果所示。

2.4.2 移动端

App 及 HTML5 效果如下图所示：

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

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