JS实现点击单选按钮弹出对话框输入值

1.1 版本

1.2 应用场景

在制作问卷调查类的模板时，可能会遇到这种情况：有几个选项，最后一个选项为其他。

选择其他时弹出一个对话框，允许用户输入其他值。

若没有输入内容就点击「确定」，则弹出提示提醒用户输入内容；若输入内容点击「确定」，则输入内容回填至报表中。如下图所示：

1.3 实现思路

为 单选按钮组 控件添加「状态改变」事件，判断选择其他时弹出对话框，将对话框中输入的内容赋值给单元格。

接口说明可以参考：API接口汇总

2.1 新建模板

点击菜单栏「文件>新建普通报表」，新建一张模板。如下图所示：

2.2 设计模板

2.2.1 添加控件

为 B1 单元格添加 单选按钮组 控件，设计报表样式。如下图所示：

2.2.2 设置数据字典

选中 B1 单元格，点击「控件设置>属性>数据字典」，设置自定义数据字典。如下图所示：

2.2.3 添加事件

选中 B1 单元格，点击「控件设置>事件」，添加一个「状态改变」事件。如下图所示：

JS 代码如下所示：

var value = this.getValue(); // 获取当前控件值

if (value == "其他") {
	function promptForInput() {
		FR.Msg.prompt("输入", "请输入您的爱好：", "", function(result) {
			// 获取输入框中输入的值
			var inputValue = result && result.toString().trim(); // 去除前后空格
			if (inputValue) {
				// 如果用户输入了内容，则将值赋给B2单元格
				_g().setCellValue(0, 1, 1, inputValue);
			} else if (result === null) {
				// 如果用户点击了取消，清空B2单元格内容
				_g().setCellValue(0, 1, 1, "");
			} else {
				// 如果用户点击了确定但输入内容为空，显示提示
				FR.Msg.alert("提示", "输入内容不能为空，请重新输入！", function(result) {
					promptForInput(); // 用户点击确定后再次弹出输入框
				});
			}
		});
	}
	promptForInput(); // 如果值是“其他”，则弹出输入框	
} 
else {
	// 如果值不是“其他”，则直接将值赋给B2单元格
	_g().setCellValue(0, 1, 1, value);
}

2.3 效果预览

2.3.1 PC 端

保存模板，选择 「填报预览」，效果如下图所示：

2.3.2 移动端

移动端效果如下图所示：

点击下载已完成模板：50-JS实现点击单选按钮弹出对话框输入值.cpt