JS實現點選單選按鈕組彈出對話框輸入值

1.1 版本

1.2 應用場景

在製作問卷調查類的範本時，可能會遇到這種情況：有幾個選項，最後一個選項為其他。

選擇其他時彈出一個對話框，允許使用者輸入其他值。

若沒有輸入內容就點選「確定」，則彈出提示提醒使用者輸入內容；若輸入內容點選「確定」，則輸入內容回填至報表中。如下圖所示：

1.3 實現思路

為 單選按鈕組 元件新增「狀態改變」事件，判斷選擇其他時彈出對話框，將對話框中輸入內容指派給儲存格。

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

2.1 建立範本

點選菜單欄「檔案>建立普通報表」，建立一張範本。如下圖所示：

2.2  準備範本

2.2.1 新增元件

1）建立範本，在 B1 儲存格新增「單選按鈕組元件」，設計報表樣式，如下圖所示：

2.2.2 設定資料字典

2）點選選擇 B1 儲存格中「單選按鈕組元件」，在「元件設定>屬性>資料字典」處為其綁定資料，如下圖所示：

2.2.3 新增事件

點選選擇 B1 儲存格中「單選按鈕組元件」，在「元件設定>事件」處為元件新增一個「狀態改變」事件，如下圖所示：

JavaScript 程式碼如下：

var value = this.getValue();
//獲取當前元件值
if (value == "其他") {
	FR.Msg.prompt("輸入", "愛好", "", function() {
		value = arguments[0] && arguments[0].toString();
		//獲取輸入框中輸入值
		_g().setCellValue(0, 1, 1, value);
		//將值賦給B1儲存格
	})
} else {
	_g().setCellValue(0, 1, 1, value);
	//將值賦給B1儲存格
}

2.3 預覽效果

2.3.1 PC 端

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

2.3.2 行動端

行動端效果如下圖所示：

點選下載範本：50-JS實現點擊單選按鈕彈出對話框輸入值.cpt