JS自訂插入和刪除行按鈕

1.1 預期效果

使用 插入和刪除按鈕，每一行都有一個按鈕，當資料量過大時，按鈕過多會導致範本載入變慢。

如何只用一個插入行和刪除行按鈕，在滑鼠停留的行位置插入一行資料或刪除對應行資料呢？效果如下圖所示：

1.2 實現思路

在範本中增加按鈕，自訂為插入和刪除按鈕 ，透過給自訂按鈕新增「點選」事件實現。API說明可以參考：填報預覽專有

2.1 準備範本

開啟內建範本：%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doctw\Form\LineForm\LineForm.cpt

點選下載範本：LineForm.cpt

開啟範本，範本報表樣式如下圖所示：

2.2 新增按鈕元件

在 J1 儲存格和 K1 儲存格新增「按鈕元件」，元件類型選擇「普通」，如下圖所示：

J1 儲存格按鈕名稱改為「插入列」， K1 儲存格按鈕名稱改為「刪除列」。如下圖所示：

2.3 按鈕新增事件

1）為 J1 儲存格中插入行按鈕新增一個點選事件，實現點選按鈕時增加一行的功能，如下圖所示：

JavaScript 程式碼如下：

_g().appendReportRC(1);//點選按鈕新增一行

2）同樣的方法為 K1 儲存格中刪除行按鈕新增一個點選事件，實現點選按鈕時刪除一行的功能，JavaScript 程式碼如下：

_g().deleteReportRC();//點選按鈕刪除一行

2.4 效果預覽

儲存範本，點選「填報預覽」，效果如 1.1 節所示。

注：不支援行動端。

已完成範本可參見：%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doctw\Form\FormFAQ\AddDelete.cpt

點選下載範本：AddDelete.cpt