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

  • 文档创建者:axing
  • 编辑次数:9次
  • 最近更新:Leo.Tsai 于 2020-09-18
  • 1. 概述

    1.1 问题描述

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

    1.png

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

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

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

    2.png

    1.2 实现思路

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

    2. 示例

    2.1 准备数据

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

    Snag_4f5233b.png

    2.2 设计表格

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

    1563347028373071.png

    2.3 设置数据字典

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

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

    1600415191718345.png

    2.4 设置填报属性

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

    1600415493885145.png

    2.5 添加初始化后事件

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

    1563348262470769.png

    JavaScript 代码如下:

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

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

    1600415904551427.png

    JavaScript 代码如下:

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

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

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

    2.6 效果预览

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

    2.png

    注:不支持移动端预览。

    3. 模板下载

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

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

    4. 注意事项

    1)问题描述

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

    2)解决方案:

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

    例如将

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

    调整为

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

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

    附件列表


    主题: 二次开发
    • 有帮助
    • 没帮助
    • 只是浏览
    • 评价文档,奖励 1 ~ 100 随机 F 豆!