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

1.1 版本

1.2 应用场景

在设计报表的过程中，有需要使用填报控件来实现查询的需求。

例如，下拉框选择地区后列表自动过滤显示所选地区的数据。如下图所示：

1.3 实现思路

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

2.1 新建报表

新建一张普通报表。如下图所示：

2.2 准备数据

新建数据查询 ds1 ，SQL 语句为：SELECT * FROM 销量 where 1=1 ${if(len(area)==0,"","and 地区='" + area + "'")} 。如下图所示：

2.3 设置参数面板控件

1）点击参数面板的编辑按钮进入参数面板编辑界面，点击右侧的「全部添加」，将参数area添加至参数面板。如下图所示：

2）设置参数area的控件为下拉框控件。如下图所示：

3）选中右侧的「para」，取消勾选「点击查询前不显示报表内容」。如下图所示：

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

2.4 设计模板

1）B2 单元格输入文本内容，C2 单元格添加下拉框控件，并输入公式：$area。如下图所示：

2）为下拉框控件设置数据字典，类型设置为「数据库表」，数据库为 FRDemo ，数据库表为「销量」，实际值和显示值都为「地区」。如下图所示：

3）B3-E3 单元格输入文本内容，B4-E4 单元格拖入数据集字段。如下图所示：

4）选中 E4 单元格，点击右侧的「单元格元素」，数据设置为「汇总>求和」。如下图所示：

2.5 添加编辑后事件

选中 C2 单元格，点击右侧「控件设置>事件」，为其添加编辑后事件，输入 JavaScript 代码。如下图所示：

JavaScript 代码如下：

注：该代码不适合 10.0，请不要拷贝到 10.0 使用。10.0 方案见：https://help.fanruan.com/finereport10.0/doc-view-1828.html

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

2.6 设置模板Web属性

1）点击菜单栏「模板>模板 Web 属性」，选择「填报页面设置>为该模板单独设置」。

2）取消勾选「未提交离开提示」，并勾选「直接显示控件」。如下图所示：

2.4 预览效果

2.4.1 PC端

保存模板，选择「填报预览」，PC 端预览效果如 1.2 节所示。

2.4.2 移动端

移动端效果如下图所示：

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

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