反馈已提交

网络繁忙

JS实现自定义按钮提交前校验

  • 文档创建者:Carly
  • 历史版本:6
  • 最近更新:帆软应用复用-Cat 于 2022-11-09
  • 1. 概述

    1.1 问题描述

    当使用自定义按钮设置填报提交时,默认是没有数据校验和提交成功/失败提示的,如果想要增加校验,该如何实现呢?

    1.gif

    1.2 实现思路

    使用2个按钮分别实现提交和校验。其中一个按钮写JS触发校验,判断如果成功的话就调用另一个提交按钮的点击事件,实现数据提交入库。接口说明可参考API接口汇总

    注:下面示例中方案一不支持移动端,方案二是支持移动端的。

    2. 方案一:整体提交

    2.1 设计模板

    如图制作模板:

    2.2 设置数据校验

    模板>报表填报属性>数据校验设置对应的校验条件,比如录入的单价不能高于20,公式为:C3<=20

    2.3 设置校验按钮

    在C1单元格添加一个普通按钮,名字为提交,并设置点击事件。该按钮虽然名字为提交,但其功能为执行校验。

    JavaScript 代码如下:

    _g().verifyReport();

    2.4 设置填报属性

    在D1单元格添加一个普通按钮,控件名称设置为submit,并设置点击事件。该按钮用于设置填报属性,设置完成后可以隐藏。

    点击事件设置如下:

    在回调函数中设置JS,用于在提交后返回提交结果。

    JavaScript 代码如下:

    if (fr_submitinfo.success) {
    FR.Msg.toast('提交成功');
    } else {
    FR.Msg.toast('提交失败,错误信息为:' + fr_submitinfo.failinfo);
    }

    2.5 设置校验后事件

    打开模板>报表 Web 属性>填报页面设置,添加一个校验后事件:

    JavaScript 代码如下:

    if (fr_verifyinfo.success) {
    _g().getWidgetByName("submit").fireEvent("click");
    //触发submit按钮的点击事件
    return false;
    }

    2.6 效果预览

    PC 端预览效果如下图所示:

    1.gif

    注:该方案不支持移动端。

    3. 方案二:单行提交

    3.1 设计模板

    如图制作模板:

    3.2 设置校验按钮

    在D2单元格添加一个普通按钮,名字为提交,并设置点击事件。该按钮虽然名字为提交,但其功能为执行校验。

    JavaScript 代码如下:

    var ro = FR.cellStr2ColumnRow(this.options.location).row;
    //获取当前行号
    var price = _g().getCellValue(0, 2, ro);
    //获取当前行的单价
    if (price <= 20) {
    var widget = _g().getWidgetByCell(FR.columnRow2CellStr({
    col: 4,
    row: ro
    }));
    //获取当前行真正的提交按钮
    widget.fireEvent('click');
    //触发按钮的点击事件,执行提交
    } else {
    FR.Msg.toast("提交失败,当前行单价不能高于20");
    }

    3.3 设置提交按钮

    在E2单元格添加一个普通按钮,并设置点击事件。该按钮用于设置填报属性,设置完成后可以隐藏。

    点击事件设置如下:

    在回调函数中设置JS,用于在提交后返回提交结果。

    JavaScript 代码如下:

    if (fr_submitinfo.success) {
    FR.Msg.toast('提交成功');
    } else {
    FR.Msg.toast('提交失败,错误信息为:' + fr_submitinfo.failinfo);
    }

    3.4 效果预览

    PC 端预览如下图所示:

    1.gif

    支持移动端预览,效果如下图所示:

    Screenshot_20220822_150816_com.finereact.v11.jpg

    4. 模板下载

    附件列表


    主题: 填报应用
    • 有帮助
    • 没帮助
    • 只是浏览
    中文(简体)

    鼠标选中内容,快速反馈问题

    鼠标选中存在疑惑的内容,即可快速反馈问题,我们将会跟进处理。

    不再提示

    10s后关闭



    AI

    联系我们
    在线支持
    获取专业技术支持,快速帮助您解决问题
    工作日9:00-12:00,13:30-17:30在线
    页面反馈
    针对当前网页的建议、问题反馈
    售前咨询
    采购需求/获取报价/预约演示
    或拨打: 400-811-8890 转1
    qr
    热线电话
    咨询/故障救援热线:400-811-8890转2
    总裁办24H投诉:17312781526
    提交页面反馈
    仅适用于当前网页的意见收集,帆软产品问题请在 问答板块提问前往服务平台 获取技术支持