JS实现单选和复选按钮组控件换行显示

1. 概述
1.1 问题描述

填报报表中使用到 单选按钮组控件和复选按钮组控件时，一般选项都会比较多，填报预览时所有选项默认都是显示在同一行的，如下图所示：

有时希望这些在一行的选项可以换行显示，提升报表的整体美观度，换行效果如下图所示：

一般情况下，我们可以通过调节列宽来让选项自动换行，但是有些时候选项是通过数据字典>数据查询动态设置的，我们无法确定选项的长度。

因此无法通过调整列宽来换行，这种情况下，如何实现下图所示的换行效果呢。

1.2 实现思路

给按钮添加初始化后事件，利用 JS 在每个选项元素后面添加换行元素。

2. 示例
2.1 准备数据

新建数据库查询数据集 ds1，SQL 语句为：SELECT DISTINCT 职务 FROM 雇员

2.2 设计表格

B2 和 D2 单元格插入文本控件，A4 单元格插入单选按钮组控件，C4 单元格插入复选按钮组控件，如下图所示：

2.3 设置数据字典

选中单选按钮组控件所在单元格 A4，如下图设置数据字典：

注：复选按钮组控件的数据字典也要同理设置。

2.4 设置填报属性

设计器菜单栏点击模板>报表填报属性，新增一个内置 SQL 提交，具体设置如下图所示：

2.5 添加初始化后事件

1）选中单选按钮组控件所在单元格 A4，给按钮添加一个初始化后事件，如下图所示：

JavaScript 代码如下：

1. setTimeout(function(){$(".fr-group-span").has(".fr-radio-radiooff").after("<br>");},200)

复制代码

2）选中复选按钮组控件所在单元格 C4，给按钮添加一个初始化后事件，如下图所示：

JavaScript 代码如下：

1. setTimeout(function(){$(".fr-group-span").has(".fr-checkbox-checkoff").after("<br>");},200)

复制代码

注：如果单选按钮组控件、复选按钮组控件不分别设置，全部都需要换行的话，只需在其中一个控件中添加如下初始化后事件即可：

1. setTimeout(function(){$(".fr-group-span").after("<br>");},200)

复制代码

2.6 效果预览

保存模板，点击填报预览，效果如下图所示：

注：不支持移动端预览。

3. 模板下载

已完成模板可参见：%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\Form\LineForm\单选和复选按钮组控件换行显示.cpt

点击下载模板：单选和复选按钮组控件换行显示.cpt

4. 注意事项

1）问题描述

设计器打开上述模板，第一次点击填报预览浏览器页面单选项和复选项并未换行显示，仍然显示在一行，但刷新浏览器页面后或者再次点击填报预览后换行显示正常。重启设计器再次打开模板上述场景依然能够复现。

2）解决方案：

这是由于不同电脑浏览器的渲染速度不同导致的，如果上述场景发生，用户只需要将初始化 JS 代码中的延时时间调大即可。

例如将

1. setTimeout(function(){$(".fr-group-span").after("<br>");},200)

复制代码

调整为

1. setTimeout(function(){$(".fr-group-span").after("<br>");},400)

复制代码

注：具体调整幅度视用户配置环境所定。

又是在cpt的案例吗？frm一点用都没有