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

编辑
  • 文档创建者:axing
  • 浏览次数:787次
  • 编辑次数:6次
  • 最近更新:Leo.Tsai 于 2019-07-17
  • 1.描述

    设置填报控件单选按钮组控件复选按钮组控件后,填报预览显示的选项都在同一行,如下图所示:

    1.png

    一般情况下,我们可以通过调节列宽来让选项自动换行,但是有些时候选项是通过数据字典>数据查询动态设置的,我们无法确定选项的长度,因此无法通过调整列宽来换行,这种情况下,如何实现下图所示的换行效果呢。

    2.png

    2. 实现思路

    利用 JS 在每个选项元素后面添加换行元素。

    3. 示例

    1)新建数据查询,添加模板数据集 ds1,如下图所示:

    SELECT DISTINCT 职务 FROM 雇员

    3.png

    2)报表设计如下图所示:

    B2 和 D2 单元格插入文本控件,A4 单元格插入单选按钮组控件,C4 单元格插入复选按钮组控件。

    3.png

    3)设置数据字典

    选择单选按钮组控件,数据字典设置如下图所示:

    4.png

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

    4)点击模板>报表填报属性>提交,设置填报属性如下图所示:

    4.png

    5)单选按钮组控件添加初始化后事件

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

    5.png

    6)复选按钮组控件添加初始化后事件

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

    6.png

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

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

    4. 效果查看

    1)PC端预览:

    保存模板,点击填报预览,效果如描述中所示。

    2)移动端预览:

    移动端不支持换行效果显示,如下图所示:

    7.jpg

    5. 已完成模板

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

    单选和复选按钮组控件换行显示.cpt

    6. 注意事项

    场景描述:

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

    解决方案:

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

    例如将

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

    调整为

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

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

    附件列表


    主题: 填报应用
    标签: 暂无标签 编辑/添加标签
    如果您认为本文档还有待完善,请编辑

    文档内容仅供参考,如果你需要获取更多帮助,付费/准付费客户请咨询帆软技术支持
    关于技术问题,您还可以前往帆软社区,点击顶部搜索框旁边的提问按钮
    若您还有其他非技术类问题,可以联系帆软传说哥(qq:1745114201

    此页面有帮助吗?只是浏览 [ 去社区提问 ]