JS實現插入自訂行數

1.1 預期效果

報表開發中，很多情況下使用者在增加行數的時候，想要自訂輸入行數，然後增加指定的行數，而不是點選一次增加一行，

效果如下圖所示：

1.2 實現思路

在儲存格按鈕元件中，新增 JS 點選事件，透過 appendReportRow() 函式來實現插入行數的功能。API說明可以參考：填報預覽專有

2.1 設計報表樣式

1）建立範本，設計報表樣式，A3-F3 儲存格新增「正文元件」，如下圖所示：

2）為配合即將新增的插入行按鈕使用，需設定 A3 儲存格為縱向擴展，選中 A3 儲存格，設定擴展方向為「縱向擴展」，如下圖所示：

2.2 新增按鈕元件

在 G3 儲存格中新增「按鈕元件」，元件類型選擇「插入列」，指定儲存格 A3，行數修改為 0，如下圖所示：

2.3 新增點選事件

給 G3 儲存格中「按鈕元件」新增點選事件，事件內容為根據輸入行數，插入行，如下圖所示：

JavaScript 程式碼如下：

num = prompt("請輸入插入行數","");
_g().appendReportRow(this.options.location, this.options.reportIndex,num)

注：appendReportRow() 函式實現的效果為在選中行後面插入 。

2.4 預覽效果

2.4.1 PC 端

儲存範本，點選「填報預覽」，效果如下所示：

2.4.2 行動端

App 及 HTML5 效果如下圖所示：

已完成的模板，可參見：%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\JS\填報預覽JS實體\42-JS實現插入自訂行數.cpt

點選下載範本：42-JS实现插入自定义行数.cpt