JS實現自訂按鈕提交前校驗

1.1 問題描述

當使用自訂按鈕設定填報提交時，預設是沒有資料校驗和提交成功/失敗提示的。

希望實現自訂按鈕提交時也能有資料校驗和提交的成功/失敗提示。如下圖所示：

1.2 實現思路

注：方案一、方案二均不支援行動端。

使用 2 個按鈕分別實現校驗和提交。其中一個按鈕寫 JS 觸發校驗，判斷成功的話就呼叫另一個按鈕的點選事件，實現資料提交入庫。

API說明可參考：JS API接口匯總

2.1 建立範本

建立一張普通報表。如下圖所示：

2.2 準備資料

建立資料庫查詢 ds1 ，SQL 語句為：SELECT * FROM S產品 limit 5。如下圖所示：

2.3 設計範本

A2-C2 儲存格輸入正文內容，A3-C3 儲存格拖入資料列並新增正文元件，自行設計報表樣式。如下圖所示：

3.1 設定報表填報屬性

1）點選菜單欄「範本>報表填報屬性>資料校驗」，新增一個內建校驗。

2）新增校驗公式：C3<=20，不滿足校驗公式提示："單價不能高於20"。如下圖所示：

3.2 設定校驗按鈕

1）為 C1 儲存格新增一個普通按鈕，按鈕名稱為「提交」。如下圖所示：

注：該按鈕雖然名稱為「提交」，但其功能為執行校驗。

2）為按鈕新增點選事件。如下圖所示：

JavaScript 程式碼如下：

_g().verifyReport();

3.4 設定提交按鈕

1）為 D1 儲存格新增一個普通按鈕，元件名稱設定為 submit 。如下圖所示：

2）為按鈕設定點選事件，事件類型為「提交入庫」，提交類型為「智慧提交」。

3）資料庫為 FRDemoTW ，表為 S產品 ，新增欄位和儲存格並勾選主鍵為「產品ID」。如下圖所示：

4）設定回呼函式，用於在提交後傳回提交結果。如下圖所示：

注：此按鈕設定完成後可以隱藏。

JavaScript 程式碼如下：

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

3.5 設定範本Web屬性

1）點選菜單欄「範本>範本Web屬性>填報頁面設定」，選擇「為該範本單獨設定」。

2）新增一個校驗後事件，輸入 JS 程式碼。如下圖所示：

JavaScript 程式碼如下：

if (fr_verifyinfo.success) {
	_g().getWidgetByName("submit").fireEvent("click");
	//觸發submit按鈕的點選事件
	return false;
}

3.6 效果預覽

注：該方案不支援行動端。

PC 端效果如下圖所示：

4.1 設定校驗按鈕

1）為 D3 儲存格新增一個普通按鈕，按鈕名稱為「提交」。如下圖所示：

注：該按鈕雖然名稱為提交，但其功能為執行校驗。

2）為按鈕新增一個點選事件。如下圖所示：

JavaScript 程式碼如下：

var ro = FR.cellStr2ColumnRow(this.options.location).row;
//獲取當前行號
var price = _g().getCellValue(0, 2, ro);
//獲取當前行的單價
if (price <= 20) {
	var widget = _g().getWidgetByCell(FR.columnRow2CellStr({
		col: 4,
		row: ro
	}));
	//獲取當前行真正的提交按鈕
	widget.fireEvent('click');
	//觸發按鈕的點選事件，執行提交
} else {
	FR.Msg.toast("提交失敗，當前行單價不能高於20");
}
显示代码

4.2 設定提交按鈕

1）為 E3 儲存格新增一個普通按鈕。如下圖所示：

2）為按鈕設定點選事件，事件類型為「提交入庫」，提交類型為「智慧提交」。

3）資料庫為 FRDemoTW ，表為 S產品 ，新增欄位和儲存格並設定主鍵為「產品ID」，如下圖所示：

4）設定回呼函式，用於在提交後傳回提交結果。如下圖所示：

JavaScript 程式碼如下：

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

4.3 效果預覽

注：該方案不支援行動端。

PC 端效果如下圖所示：

點選下載範例一已完成範本：JS實現自訂按鈕提交前校驗-範例一.cpt

點選下載範例二已完成範本：JS實現自訂按鈕提交前校驗-範例二.cpt