最新历史版本 :JS实现点击单选按钮弹出对话框输入值 返回文档
编辑时间: 内容长度:图片数:目录数: 修改原因:

目录:

1. 概述编辑

1.1 版本

版本功能变更
11.0
-

1.2 应用场景

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

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

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

视频动图.gif

1.3 实现思路

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

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

2. 示例编辑

2.1 新建模板

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

新建普通报表.png

2.2 设计模板

2.2.1 添加控件

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

222

2.2.2 设置数据字典

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

2.jpg

2.2.3 添加事件

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

3.png

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 端

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

视频动图.gif

2.3.2 移动端

移动端效果如下图所示:

手机视频动图1.gif

3. 模板下载编辑