JS實現刪除時二次確認

預設刪除列按鈕，點選刪除不會二次確認，因此可能會出現誤刪的情況。如果希望點選刪除按鈕時，可以彈出確認刪除的提示框，要怎麼實現呢？效果如下圖所示：

1.2 實現思路

用「普通」按鈕類型製作刪除列按鈕，並新增點選事件，實現刪除時透過彈窗進行二次確認。API說明可以參考：API匯總

注：不支援行動端。

1）建立資料庫查詢資料集 ds1，SQL 語句為：SELECT * FROM Sales

2）設計填報表格，將對應欄位拖入 A3-F3 儲存格，並分別新增「正文元件」，如下圖所示：

3）在 G3 儲存格新增按鈕元件，按鈕類型選擇「普通」，按鈕名稱填寫「刪除列」，如下圖所示：

2.2 設定報表填報屬性

菜單欄選擇「範本>報表填報屬性」，新增「內建 SQL」 提交，設定如下圖所示：

注：建議勾選「未修改不更新」，防止大數據量時提交出現效能問題。如場景限制無法勾選，可以考慮範例二的方法 。

2.3 新增點選事件

選中 G3 儲存格，新增「點選事件」，如下圖所示：

JavaScript 程式碼如下：

var cell = this.options.location;
//獲取當前元件所在儲存格的編號
FR.Msg.confirm("警告", "確定要刪除嗎？", function(value) {
	if (value) {
		_g().deleteReportRC(cell);
		//刪除當前列
	}
})

刪除列按鈕只會從頁面上刪除當前列，如果需要在刪除列時觸發提交動作，則更換成如下 JavaScript 程式碼：

var cell = this.options.location;
//獲取當前元件所在儲存格的編號
FR.Msg.confirm("警告", "確定要刪除嗎？", function(value) {
	if (value) {
		_g().deleteReportRC(cell);
		//刪除當前列
		_g().verifyAndWriteReport();
		//校驗並提交
	}
})

2.4 效果預覽

注：如果設定了提交的JS，那麼當未勾選「未修改不更新」時，每次刪除列都會觸發頁面的整體提交來實現刪除資料效果。如果只希望觸發單列資料的刪除，必須勾選「未修改不更新」，或者可以參考範例二的方法實現。

3.1 設計報表

1）建立資料庫查詢資料集 ds1，SQL 語句為：SELECT * FROM Sales

2）設計填報表格，將對應欄位拖入 A3-F3 儲存格，並分別新增「正文元件」，如下圖所示：

3）在 G3 儲存格新增按鈕元件，按鈕類型選擇「普通」，按鈕名稱填寫「刪除列」，如下圖所示：

4）在 H3 儲存格新增按鈕元件，按鈕類型選擇「普通」，按鈕名稱填寫「刪除列（隱藏）」，如下圖所示：

注：必須是「普通」類型按鈕，「刪除列」類型按鈕會有邏輯衝突問題。

3.2 設定刪除提交

1）選中 H3 的按鈕元件，設定一個點選事件。選擇「提交入庫>刪除提交」，綁定對應主鍵欄位。

2）在回呼函式中，新增 JavaScript 程式碼實現刪除列動作以及提交結果提示。

JavaScript 程式碼如下：

if (fr_submitinfo.success) {
	_g().deleteReportRC(this.options.location);
	//刪除當前列
	FR.Msg.toast('刪除成功');
} else {
	FR.Msg.toast('刪除失敗，錯誤資訊為：' + fr_submitinfo.failinfo);
}

3）設定完成後隱藏H欄。

3.3 設定二次確認

選中 G3 的按鈕元件，設定一個點選事件，用於實現刪除列前的二次確認效果。

JavaScript 程式碼如下：

var cell = this.options.location;
//獲取當前元件所在儲存格的編號
var cr = FR.cellStr2ColumnRow(cell);
//獲取當前儲存格的列欄號
var delcell = FR.columnRow2CellStr({
	col: cr.col + 1,
	row: cr.row
})
//獲取當前儲存格後一欄的儲存格編號
FR.Msg.confirm("警告", "確定要刪除嗎？", function(value) {
	if (value) {
		_g().getWidgetByCell(delcell).fireEvent("click");
		//模擬點選按鈕
	}
})

3.4 效果預覽

儲存報表，填報預覽後效果如下圖所示：

點選下載範本

範例一：JS實現刪除列時二次確認-範例一.cpt

範例二：JS實現刪除列時二次確認-範例二.cpt