JS实现无需点击查询按钮即可自动查询

1.1 版本

1.2 预期效果

我们内置的查询界面都要通过点击查询按钮才能查询出数据，用户觉得这样太麻烦，希望直接在输入参数后就查询结果，不需要点击查询按钮，或者在填报成功后重新触发查询，那么如何来实现呢？如下图所示：

1.3 实现思路

用户可以通过取消勾选「点击查询前不显示报表内容」按钮实现，也可以通过添加 JS 事件实现。

• 如果用户只是想首次查询时，不用点击按钮就能查询，可取消勾选「点击查询前不显示报表内容」按钮，如何取消可查看 参数面板简介 对应章节的内容。
  

• 如果用户想要修改参数后自动查询，用户可以在模板中添加 JS 脚本 _g().parameterCommit() 来触发查询事件，也就是本文示例的内容。

注1：同样适用于决策报表。

注2：本文方案为全局刷新，若只想刷新指定对象，可参考文档 下拉框和图表联动 。

2.1 准备模板

准备一个需要参数查询，但参数面板不添加查询按钮的模板。

打开内置模板 %FR_HOME%\webroot\WEB-INF\reportlets\GettingStarted.cpt，删除参数面板「查询」按钮，如下图所示：

点击可下载模板：GettingStarted.cpt

2.2 添加事件

点击参数面板的「下拉框控件」，为其添加一个「编辑后」事件，实现下拉框选择值后触发报表查询的功能，如下图所示：

JavaScript 代码如下：

注：预览时，若出现报错显示无法读取未定义的属性，可为代码添加一个延迟函数，详情可查看：二次开发常见问题

_g().parameterCommit();

2.3 效果预览

保存报表，点击「分页预览」，在下拉框控件中选择某个值后就可自动查询，PC端效果如 1.2 节所示。

App 及 HTML5 效果如下图所示：

已完成模板可参见：

%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\JS\参数界面JS实例\JS实现无需点击查询按钮即可自动查询.cpt

点击下载模板：JS实现无需点击查询按钮即可自动查询.cpt