历史版本3 :JS实现日期控件点击确定后再查询 返回文档
编辑时间:
内容长度:图片数:目录数:
修改原因:
1. 概述编辑
1.1 问题描述
日期控件放置在决策报表的body主体中,只要更改日期控件的值就会直接触发参数传递,而并非是点击确定后才触发,并且点击取消也不会恢复初始值。
1.2 解决思路
增加一个日期控件做中转控件,然后通过 JS 分别给日期控件的确定和取消按钮绑定点击事件。
2. 示例说明编辑
2.1 添加两个日期控件
控件类型 | 控件名称 | 属性设置 | 事件设置 | 备注 |
日期控件 | date | 可用,不可见 | 无 | 作为中转控件使用 |
日期控件 | dateEditor | 可用,可见 | 初始化后事件,编辑结束事件 | 编辑使用 |
2.3 添加事件
1. 给 dateEditor 添加 初始化后事件
JS 代码如下:
var dateEditor = this.options.form.getWidgetByName('dateEditor');
var date = this.options.form.getWidgetByName('date');
this.btn.bind('click', function() {
setTimeout(function() {
$('td.ok').bind('click', function() {
date.setValue(dateEditor.getValue());
date.fireEvent(FR.Events.AFTEREDIT); //触发编辑后事件
});
$('td.cancel').bind('click', function() {
dateEditor.setValue(date.getValue());
});
});
});
2. 给 dateEditor 添加 编辑结束事件
JS 代码如下:
var date =this.options.form.getWidgetByName("date");
date.setValue(this.getValue());
date.fireEvent(FR.Events.AFTEREDIT); //触发编辑后事件
2.4 效果预览
点击「表单预览」,如下图所示:
注:不支持移动端
3. 模板下载编辑
点击下载示例模板: