历史版本6 :自定义填报提交按钮并使其变大 返回文档
编辑时间: 内容长度:图片数:目录数: 修改原因:

目录:

1. 描述编辑

在很多应用填报的场景中,我们一般都需要自己来确定“提交”按钮的位置和大小,并不喜欢用系统的左上角按钮,现在我们开始自定义“提交”按钮的教程。效果如下:

222

2. 操作步骤编辑

首先新建一个 cpt 普通报表,在 C6 单元格新建一个“按钮控件”,按钮类型为“普通按钮”,按钮名为“提交”,效果如下:

222

之后在事件下添加“点击”事件和“初始化”事件,效果如下:

222

在点击事件中添加如下代码:


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

在初始化事件中添加如下代码:


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"
  );
});


3. 保存预览编辑

此处应用场景为填报场景,故预览时使用填报预览

注意:移动端和 H5 界面不支持该效果。


4. 模板下载编辑

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

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