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

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) {// 控件的鼠标监听
     $("#C6-0-0").css(//获取当前C6单元格并赋予样式
  "-webkit-transform","scale(1.5)"
  );
  $("#C6-0-0").css(
  "-ms-transform","scale(1.5)"
  );
  $("#C6-0-0").css(
  "transform","scale(1.5)"
  );
}, function(e) {
$("#C6-0-0").css(
  "-webkit-transform","none"
  );
  $("#C6-0-0").css(
  "-ms-transform","none"
  );
  $("#C6-0-0").css(
  "transform","none"
  );
});
显示代码

2.3 效果预览

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

注：不支持移动端。

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

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