JS自訂按鈕提交當前行

1.1 問題描述

預設工具欄提交按鈕，不做特殊設定的話，點選後會按照填報屬性設定將整個頁面的資料進行提交入庫操作。

如果想在頁面上進行提交操作，並且每次只提交當前行，該如何實現呢？

1.2 解決思路

可透過新增自訂按鈕，設定提交入庫事件功能來實現。

將提交按鈕設定在儲存格，並隨資料擴展，這樣按鈕就和資料有父子關係，點選按鈕時可以獲取當前行的資料，最終實現提交當前行資料入庫的效果。

2.1 設計表格

1）建立普通報表，建立資料集 ds1 ，SQL 語句為：SELECT * FROM Sales

2）如下圖設計表格，A3~F3 新增正文元件，G3儲存格新增一個按鈕元件，且按鈕名稱為“提交”，如下圖所示：

2.2 設定提交入庫事件

選中 G3 儲存格，新增點選事件，將事件類型改為提交入庫，並綁定欄位和儲存格，如下圖所示：

2.3 設定回呼函式

由於元件事件中的提交入庫設定沒有成功和失敗提醒，所以需要手動為其新增。可以在提交入庫設定的回呼函式中，使用 JavaScript 事件進行設定，如下圖所示：

JavaScript 程式碼如下：

if (fr_submitinfo.success) {
	FR.Msg.toast('當前行提交成功');
} else {
	FR.Msg.toast('當前行提交失敗，錯誤資訊為：' + fr_submitinfo.failinfo);
}

注：success 只表示後臺程式執行沒有異常，最終入庫結果會受到設定的影響，可能和預期的不一致。

2.4 預覽效果

儲存範本，點選「填報預覽」，在點選提交按鈕後，會發現只有當前行的值進行了提交。

2.4.1 PC端

2.4.2 行動端

App 與 HTML5 端效果相同，如下圖所示：

3.1 問題描述

若除了提交外，希望實現擁有刪除按鈕刪除當前行資料，效果如下圖所示：

3.2 解決方案

3.2.1 報表設計

1）建立普通報表，建立資料集 ds1 ，SQL 語句為：SELECT * FROM Sales

2）如下圖設計表格，A3~F3 新增正文元件，H3儲存格新增一個按鈕元件，且按鈕名稱為“刪除”，如下圖所示：

3.2.2 設定刪除提交事件

選中 H3 儲存格，新增點選事件，將事件類型改為提交入庫，並綁定欄位和儲存格，如下圖所示：

3.2.3 設定回呼函式

由於元件事件中的刪除提交入庫設定沒有成功和失敗提醒，所以需要手動為其新增。可以設定的回呼函式中，使用 JavaScript 事件進行設定，如下圖所示：

JS 程式碼如下：

if (fr_submitinfo.success) {
	FR.Msg.toast('當前行刪除提交成功');
} else {
	FR.Msg.toast('當前行提交失敗，錯誤資訊為：' + fr_submitinfo.failinfo);
}

3.2.4 效果預覽

如 3.1 節所示

已完成範本參見：%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\JS\填報預覽JS實體\自訂按鈕實現單行提交.cpt

點選下載範本：自定义按钮实现单行提交.cpt