自定義填報提交按鈕并使其變大

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