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