反馈已提交

网络繁忙

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

  • 文档创建者:Carly
  • 编辑次数:2次
  • 最近更新:Leo.Tsai 于 2022-08-22
  • 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

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

    Screenshot_20220822_150402_com.finereact.v11.jpg

    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. 模板下载

    附件列表


    主题: 填报应用
    • 有帮助
    • 没帮助
    • 只是浏览

    售前咨询电话

    400-811-8890转1

    在线技术支持

    在线QQ:800049425

    热线电话:400-811-8890转2

    总裁办24H投诉

    热线电话:173-1278-1526

    文 档反 馈

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

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

    不再提示

    10s后关闭