历史版本21 :JS实现使用填报页面的控件查询 返回文档
编辑时间: 内容长度:图片数:目录数: 修改原因:

目录:

1. 概述编辑

1.1 版本

版本
功能变更
11.0-

1.2 应用场景

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

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

222

1.3 实现思路

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

2. 示例编辑

2.1 新建报表

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

新建普通报表.jpg

2.2 准备数据

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

6.jpg

2.3 设置参数面板控件

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

7.jpg

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

10.jpg

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

11.jpg

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

12.jpg

2.4 设计模板

1)B2 单元格输入文本内容,C2 单元格添加下拉框控件。

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

19.jpg

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

20.jpg

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

13.jpg

2.5 添加编辑后事件

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

17.jpg

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)取消勾选「未提交离开提示」,并勾选「直接显示控件」。如下图所示:

18.jpg


2.4 预览效果

2.4.1 PC端

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

2.4.2 移动端

移动端效果如下图所示:

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

3. 模板下载编辑

点击下载已完成模板:JS实现使用填报页面的控件查询.cpt