1. 概述
参数面板上添加控件实现参数查询时，当设计器中控件的配置项无法满足用户的需求时，用户可以使用 JavaScript 来开发功能，如修改控件样式、设置控件默认值、修改控件搜索逻辑、实现参数联动、实现参数查询等。
2. 接口
对控件进行修改时，需要先获取到控件，那么如何使用 JavaScript 来获取到参数面板上的控件呢？可查看：参数面板接口、获取控件
获取到控件之后，需要对该控件进行操作，如获取其控件值，赋值，设置是否可见等，可查看：控件通用、日期控件专有、按钮控件专有、下拉框控件专有
3. 示例
| 目录 | 文档 | 应用场景 |
|---|---|---|
| 控件样式和属性 | 修改控件样式 | 在实际项目中，为了让 FineReport 报表中的控件和页面风格一致， 需要修改下控件的显示样式。 |
| JS实现按钮文字竖排显示 | 显示在按钮上的文字可以竖排显示。 | |
| JS给参数控件添加水印文字 | 控件添加水印的接口，可以通过 JS 给控件添加水印。 | |
| JS实现点击任意位置展现下拉框列表 | 将下拉框、下拉复选框设置为点击任意位置即可展开下拉框选项，非默认的点击最右侧的三角才可以实现下拉。 | |
| JS实现下拉框悬浮显示实际值 | 下拉框的数据字典中设置了实际值与显示值，展示的时候只能看到显示值，希望鼠标放上去的时候，可以悬浮显示实际值。 | |
| JS实现下拉复选框默认全选 | 下拉框默认将全部选项选中。 | |
| JS实现复选按钮组控件默认全选 | 复选按钮自带的「支持全选」功能勾选后会出现会出现一个「全选」的按钮，若不希望出现此按钮可以添加 JS 实现全选。 | |
| JS实现日期控件查询天数控制 | 参数面板有2个日期控件，开始时间和结束时间，想要判断开始时间不能大于结束时间，且两者间隔不超过30天。 | |
| JS实现参数联动层级限制弹出提示框 | 多个筛选框，选择值时有先后顺序，用户选择时，若不符合先后顺序，给出弹窗提示且不允许选择。 | |
| JS实现起始日期编辑后结束日期增加7天 | 有两个日期控件分别为起始日期和结束日期，要查询一个星期的数据，实现选择起始日期之后，结束日期自动赋值为起始日期后7天的日期。 | |
| 控件联动 | JS实现动态选择列并查询值 | 当报表的数据列比较多时，可以动态选择需要的列并查询对应的值。 |
| JS根据条件显示参数控件 | 部分参数控件在没满足条件时不显示，满足条件后再显示，如 A 下拉框选择了内容之后，B 下拉框才显示出来。 | |
| JS实现动态隐藏参数以及控制参数面板高度 | 参数控件较多时，这时候可以对一些不常用、不需要展现出来的的控件进行隐藏，当需要展示的时候再使其展示出来。 | |
| JS实现自定义按钮快速给参数赋指定范围值 | 周报、月报、季报、年报中有参数查询时，只需点击某个按钮，就能准确定位到合适的时间范围。 | |
| JS实现参数控件赋值 | 参数界面中，当一个控件的值取决于另一个控件的值时，就可以通过 JS 条件判断实现。 | |
| JS实现下拉框选择后复选框默认全选 | 参数联动查询时，选项之间有层级时，希望下拉框选择值后，复选框可以跟着选中所有和上级相关的值。 | |
| JS实现参数面板显示对应数据 | 参数面板选择一次参数之后，可以在参数面板中展现出来对应的其他数据。 | |
| JS实现清空控件内容 | 在使用查询控件时，有时我们希望能够快捷重置控件的内容，或者重置所有控件的内容。 | |
| 动态显示参数控件 | 由于业务的需要，很多情况下需要当满足某个条件时，某些查询条件才显示出来。 | |
| JS实现弹窗后数据回填 | 当某个单选框下拉项比较多时，可以将所有选项做成报表，点击报表中选项即选中。 | |
| JS实现自定义选项弹窗 | 当某个复选框下拉项比较多时，可以将所有选项做成报表，点击报表中选项即选中。 | |
| 动态表 | JS实现点击参数面板按钮显示或隐藏数据 | 当报表中列表数据太多时，可通过显示按钮隐藏明细数据只显示统计数据。 |
| JS实现点击按钮切换Sheet页 | 填报预览时，当报表有多个 Sheet 时，可以通过参数面板上按钮跳转到指定的 Sheet 。 | |
| 根据参数查看不同报表 | 根据参数值的不同跳转到不同的模板。 | |
| 其他 | JS实现无需点击查询按钮即可自动查询 | 不点击查询按钮，在控件中输入值后就能查询结果。 |
| 根据账号控制查询数据权限 | 可以采用文本控件、按钮控件、单元格复选框自定义一个选项弹窗进行查询，适用于使用控件时，下拉选项较多，不能全部加载出来的场景。 | |
| JS对于下拉框数据量大的解决方案 | 下拉框复选框中的数据量很大，有上万条选项时，虽然使用模糊搜索功能但仍无法在下拉框中加载全部项，可以将所有选项做成报表，点击报表中选项即选中。 |
上一篇：下拉复选框控件联动并实现动态列
