反馈已提交

网络繁忙

JS自定义按钮提交当前行

  • 文档创建者:yiyemeiying
  • 编辑次数:21次
  • 最近更新:Catqiu 于 2022-11-10
  • 1. 概述

    1.1 问题描述

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

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


    1.2 解决思路

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

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

    2. 示例

    2.1 设计表格

    1)新建普通报表,新建数据集 ds1 ,SQL 语句为:SELECT * FROM Sales


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

    Snag_23d10a5a.png

    2.2 设置提交入库事件

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

    image.png

    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. 示例拓展

    3.1 问题描述

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

    2022-11-10_17-07-43.gif


    3.2 解决方案

    3.2.1 报表设计

    1)新建普通报表,新建数据集 ds1 ,SQL 语句为:SELECT * FROM Sales

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


    3.2.2 设置删除提交事件

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

    企业微信截图_16680717999834.png


    3.2.3 设置回调函数

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


    JS 代码如下:

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

    3.2.4 效果预览

    如 3.1 节所示

    4. 模板下载

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

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

    附件列表


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

    售前咨询电话

    400-811-8890转1

    在线技术支持

    在线QQ:800049425

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

    总裁办24H投诉

    热线电话:173-1278-1526

    文 档反 馈

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

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

    不再提示

    10s后关闭

    7*24h

    智 能客 服