JS去掉填报校验出错提示框

编辑
  • 文档创建者:yiyemeiying
  • 浏览次数:5137次
  • 编辑次数:11次
  • 最近更新:Kevin-s 于 2019-12-04
  • 1. 概述

    1.1 问题描述

    场景描述:在 Web 端使用填报报表数据校验时,若不满足范围会默认会自动弹出提示框,提示校验出错。若用户只希望报表主体中有个符号提示就好,不需要弹出提示框(特别是提示信息过多,导致遮挡住下面报表主体的填报)时,就会影响填报的整个流程。

    222

    1.2 实现思路

    我们可以为模板自定义一个提交按钮,添加 JS 事件就能实现。

    2. 示例

    2.1 打开模板

    打开模板:%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\Form\RefreshDataForm\RefreshData.cpt

    2.2 添加数据校验

    点击模板>报表填报属性>数据校验,输入校验公式,可参考 内置提交校验

    image.png

    2.3 添加按钮自定义事件

    点击菜单模板>模板 Web 属性>填报页面设置,选择为该模板单独设置,双击添加自定义按钮,编辑自定义的按钮,修改控件别名为提交(去提示框),添加自定义事件,如下图所示:

    image.png

    点击自定义事件,添加 JS 代码如下:


    contentPane.verifyReport();//实现提交入库且数据校验;
    $('.verify-error-container').hide();//实现隐藏校验提示框;


    注:如果模板是嵌入到 iframe 中,报表外按钮需要实现该功能。

    JS 事件代码如下:


    contentPane.verifyReport();  
    $("#id").contents().find(".verify-error-container").hide();//id为对应iframe的id值。 

    2.4 预览效果

    保存后,点击填报预览,点击按钮,效果如下图所示:

    点击自定义按钮进行提交,此时可以看到对应校验单元格会出现提示,但提示框已经不再显示。

    image.png

    注:经过测试,手机端和 H5 不支持该效果。


    3. 模板下载

    模板效果在线查看请点击:JS 去掉填报校验出错提示框.cpt

    已完成的模板,可参见:%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\JS\填报预览JS实例\09-JS去掉填报校验出错提示框.cpt

    点击下载模板:09-JS去掉填报校验出错提示框.cpt


    附件列表


    主题: 二次开发
    标签: 暂无标签
    如果您认为本文档还有待完善,请编辑

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

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