历史版本2 :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 效果预览

点击「表单预览」，如下图所示：

示例效果.gif

注：不支持移动端

3. 模板下载编辑

点击下载示例模板：

示例.frm