JS自定义按钮提交当前行

1.1 问题描述

默认的工具栏提交按钮，不做特殊设置的话，点击后会按照填报属性设置将整个页面的数据进行提交入库操作。

如果想在页面上进行提交操作，并且每次只提交当前行，该如何实现呢？

1.2 解决思路

可通过添加自定义按钮，设置提交入库事件功能来实现。

将提交按钮设置在单元格，并随数据扩展，这样按钮就和数据有父子关系，点击按钮时可以获取当前行的数据，最终实现提交当前行数据入库的效果。

2.1 设计表格

1）新建普通报表，新建数据集 ds1 ，SQL 语句为：SELECT * FROM Sales

2）如下图设计表格，A3~F3 添加文本控件，G3单元格添加一个按钮控件，且按钮名字为“提交”，如下图所示：

2.2 设置提交入库事件

选中 G3 单元格，添加点击事件，将事件类型改为提交入库，并绑定字段和单元格，如下图所示：

2.3 设置回调函数

由于控件事件中的提交入库设置没有成功和失败提醒，所以需要手动为其添加。可以在提交入库设置的回调函数中，使用 JavaScript 事件进行设置，如下图所示：

JavaScript 代码如下：

if (fr_submitinfo.success) {
	FR.Msg.toast('当前行提交成功');
} else {
	FR.Msg.toast('当前行提交失败，错误信息为：' + fr_submitinfo.failinfo);
}

注：success 只表示后台程序执行没有异常，最终入库结果会受到设置的影响，可能和预期的不一致。

2.4 预览效果

保存模板，点击「填报预览」，在点击提交按钮后，会发现只有当前行的值进行了提交。

2.4.1 PC端

2.4.2 移动端

App 与 HTML5 端效果相同，如下图所示：

3.1 问题描述

若除了提交外，希望实现拥有删除按钮删除当前行数据，效果如下图所示：

3.2 解决方案

3.2.1 报表设计

1）新建普通报表，新建数据集 ds1 ，SQL 语句为：SELECT * FROM Sales

2）如下图设计表格，A3~F3 添加文本控件，H3单元格添加一个按钮控件，且按钮名字为“提交”，如下图所示：

3.2.2 设置删除提交事件

选中 H3 单元格，添加点击事件，将事件类型改为提交入库，并绑定字段和单元格，如下图所示：

3.2.3 设置回调函数

由于控件事件中的删除提交入库设置没有成功和失败提醒，所以需要手动为其添加。可以设置的回调函数中，使用 JavaScript 事件进行设置，如下图所示：

JS 代码如下：

if (fr_submitinfo.success) {
	FR.Msg.toast('当前行删除提交成功');
} else {
	FR.Msg.toast('当前行提交失败，错误信息为：' + fr_submitinfo.failinfo);
}

3.2.4 效果预览

如 3.1 节所示

已完成模板参见：%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\JS\填报预览JS实例\自定义按钮实现单行提交.cpt

点击下载模板：自定义按钮实现单行提交.cpt