FR决策报表——JS实现日期控件点击按钮后查询

---

JS实现日期控件点击按钮后查询

1. 概述

1）在决策报表，控件可以放在参数面板中，也可以放在body中。区别在于，body中的控件只要一经编辑，就会直接触发参数查询；而在参数面板中，则是需要点击查询按钮，才会提交参数。

2）日期控件放置在决策报表的 body 中时，只要更改日期控件的值就会直接触发参数传递，而并非是点击日期控件上的「确定」按钮后才触发；并且点击「确定」按钮后日期值也无法恢复到原始值。

2. 应用场景

如果你不想把控件放在参数面板（因为参数面板的位置只能是在body的顶端，有些报表布局可能不好看），而是放在body中，并且想要实现点击按钮后再查询，那么可以参考此文的相关配置。

3. 示例

3.1 方法一：点击「查询」按钮后查询

1）新建决策报表，在 body 中添加两个「日期控件」、一个「报表块」和一个「按钮」控件。

组件类型	控件名称	作用
日期控件	dateEditor	用于编辑日期值
日期控件	date	作为中转控件，前端页面无需显示，可将其属性设置为可用不可见。
报表块	report0	通过$date获取参数的值，查看参数传递的效果。
按钮控件	button0	点击后实现参数查询

2）给 dateEditor 添加「初始化」 和 「编辑结束」事件

①「初始化」 事件，如图所示：

JavaScript 代码如下：

/**
 * https://bbs.fanruan.com/wenda/question/10573.html
 * */
var dateEditor = this.options.form.getWidgetByName('dateEditor');
var date = this.options.form.getWidgetByName('date');
this.btn.bind('click', function