自定义填报提交按钮并使其变大

1.1 预期效果

某些填报应用的场景中，需要自定义「提交按钮」，包括按钮的位置和大小，如何实现自定义提交按钮呢？如下图所示：

1.2 实现思路

通过给「按钮控件」添加事件，利用 JS 代码实现。

2.1 准备模板

新建一个 cpt 普通报表，在 C4 单元格添加「按钮控件」，按钮类型选择「普通」，按钮名为「提交」。如下图所示：

2.2 添加事件

点击 C4 单元格 控件，为其添加一个「点击」事件和「初始化」事件。如下图所示：

「点击」事件 JavaScript 代码如下：

_g('${sessionID}').writeReport();  
FR.Msg.toast("提交成功！");  

「初始化后」事件 JavaScript 代码如下：

var el = this.element.children(); // 获取当前控件
el.hover(function(e) { // 控件的鼠标监听
	$("#C4-0-0").css( //获取当前C4单元格并赋予样式
		"-webkit-transform", "scale(1.5)"
	);
	$("#C4-0-0").css(
		"-ms-transform", "scale(1.5)"
	);
	$("#C4-0-0").css(
		"transform", "scale(1.5)"
	);
}, function(e) {
	$("#C4-0-0").css(
		"-webkit-transform", "none"
	);
	$("#C4-0-0").css(
		"-ms-transform", "none"
	);
	$("#C4-0-0").css(
		"transform", "none"
	);
});
显示代码

2.3 效果预览

保存模板，点击「填报预览」，效果如下图所示：

注：不支持移动端。

已完成模板可参见：%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\JS\自定义填报提交按钮并使其变大.cpt

点击下载模板：自定义填报提交按钮并使其变大 .cpt