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

1.1 應用場景

在制作問卷調查類的模板時，可能會遇到這種情況：有幾個選項，最後一個選項爲其他，當選擇其他時彈出一個對話框，允許用戶輸入其他值，然後顯示輸入的值。如下圖所示：

1.2 實現思路

「單選按鈕組」控件添加「狀态改變」事件，事件内容爲彈出對話框、将對話框中輸入的内容賦值給顯示單元格。

2.1 準備模板

1）新建模板，在 B2 單元格添加「單選按鈕組控件」，設計報表樣式，如下圖所示：

2）點擊選擇 B2 單元格中「單選按鈕組控件」，在「控件設置>屬性>數據字典」處爲其綁定數據，如下圖所示：

2.2 控件添加事件

點擊選擇 B2 單元格中「單選按鈕組控件」，在「控件設置>事件」處爲控件添加一個「狀态改變」事件，如下圖所示：

注：JS 代碼中，控件選擇的内容設置顯示在 B2 單元格中，使用時請根據實際情況調整。 

JavaScript 代碼如下：

var value =this.getValue();   //獲取當前控件值  
function test(){     
var num = arguments[0].toString();  //獲取輸入框中輸入的值  
contentPane.setCellValue("B2", null, num);     //将輸入框中的值賦值給B2單元格  
};
if(value =="其他"){    
FR.Msg.prompt("輸入", "愛好", "",test);   //彈出輸入對話框  
}
else
contentPane.setCellValue("B2", null, value);

注：上述 JS 不支持移動端

移動端不能使用單元格賦值的方法，可使用坐标賦值的方法，JavaScript 代碼如下：

var value =this.getValue();   //獲取當前控件值  
function test(){     
var num = arguments[0].toString();  //獲取輸入框中輸入的值  
contentPane.setCellValue(1, 1, num);  //将輸入框中的值賦值給B2單元格
};
if(value =="其他"){    
FR.Msg.prompt("輸入", "愛好", "",test);   //彈出輸入對話框  
}
else
contentPane.setCellValue(1, 1,value);

2.3 預覽效果

2.3.1 PC 端

保存模板，選擇 「填報預覽」，效果如下圖所示：

2.3.2 移動端

移動端及 HTML 5 效果如下圖所示：

已完成的模板可參見：%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\JS\填報預覽JS實例\50-JS實現點擊單選按鈕彈出對話框輸入值.cpt

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