1. 概述编辑
1.1 问题描述
当使用自定义按钮设置填报提交时，默认是没有数据校验和提交成功/失败提示的。
希望实现自定义按钮提交时也能有数据校验和提交的成功/失败提示。如下图所示：
1.2 实现思路
注：方案一、方案二均不支持移动端。
使用 2 个按钮分别实现校验和提交。其中一个按钮写 JS 触发校验，判断成功的话就调用另一个按钮的点击事件，实现数据提交入库。
接口说明可参考：API接口汇总
2. 准备模板编辑
2.1 新建模板
新建一张普通报表。如下图所示：
2.2 准备数据
新建数据库查询 ds1 ，SQL 语句为：SELECT * FROM S产品 limit 5。如下图所示：
2.3 设计模板
A2-C2 单元格输入文本内容，A3-C3 单元格拖入数据列并添加文本控件，自行设计报表样式。如下图所示：
3. 方案一：整体提交编辑
3.1 设置报表填报属性
1）点击菜单栏「模板>报表填报属性>数据校验」，添加一个内置校验。
2）添加校验公式：C3<=20，不满足校验公式提示："单价不能高于20"。如下图所示：
3.2 设置校验按钮
1）为 C1 单元格添加一个普通按钮，按钮名字为「提交」。如下图所示：
注：该按钮虽然名字为「提交」，但其功能为执行校验。
2）为按钮添加点击事件。如下图所示：
JavaScript 代码如下：
_g().verifyReport();
3.4 设置提交按钮
1）为 D1 单元格添加一个普通按钮，控件名称设置为 submit 。如下图所示：
2）为按钮设置点击事件，事件类型为「提交入库」，提交类型为「智能提交」。
3）数据库为 FRDemo ，表为 S产品 ，添加字段和单元格并勾选主键为「产品ID」。如下图所示：
4）设置回调函数，用于在提交后返回提交结果。如下图所示：
注：此按钮设置完成后可以隐藏。
JavaScript 代码如下：
if (fr_submitinfo.success) {
FR.Msg.toast('提交成功');
} else {
FR.Msg.toast('提交失败，错误信息为：' + fr_submitinfo.failinfo);
}
3.5 设置模板Web属性
1）点击菜单栏「模板>模板Web属性>填报页面设置」，选择「为该模板单独设置」。
2）添加一个校验后事件，输入 JS 代码。如下图所示：
JavaScript 代码如下：
if (fr_verifyinfo.success) {
_g().getWidgetByName("submit").fireEvent("click");
//触发submit按钮的点击事件
return false;
}
3.6 效果预览
注：该方案不支持移动端。
PC 端效果如下图所示：
4. 方案二：单行提交编辑
4.1 设置校验按钮
1）为 D3 单元格添加一个普通按钮，按钮名字为「提交」。如下图所示：
注：该按钮虽然名字为提交，但其功能为执行校验。
2）为按钮添加一个点击事件。如下图所示：
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");
}
4.2 设置提交按钮
1）为 E3 单元格添加一个普通按钮。如下图所示：
2）为按钮设置点击事件，事件类型为「提交入库」，提交类型为「智能提交」。
3）数据库为 FRDemo ，表为 S产品 ，添加字段和单元格并设置主键为「产品ID」，如下图所示：
4）设置回调函数，用于在提交后返回提交结果。如下图所示：
JavaScript 代码如下：
if (fr_submitinfo.success) {
FR.Msg.toast('提交成功');
} else {
FR.Msg.toast('提交失败，错误信息为：' + fr_submitinfo.failinfo);
}
4.3 效果预览
注：该方案不支持移动端。
PC 端效果如下图所示：
5. 模板下载编辑
点击下载示例一已完成模板：JS实现自定义按钮提交前校验方案一.cpt
点击下载示例二已完成模板：JS实现自定义按钮提交前校验方案二.cpt