点击删除按钮直接提交入库

  • 文档创建者:文档助手1
  • 编辑次数:29次
  • 最近更新:Leo.Tsai 于 2020-09-09
  • 1. 概述

    1.1 问题描述

    有时候希望点击删除行按钮后,可以自动执行提交动作,无需点击工具栏提交按钮入库,效果如下图所示:

    3A918F81-B4A6-409A-A910-3A02DA7EFBA7.GIF

    1.2 实现思路

    给删除行按钮添加点击事件,实现点击删除行按钮后,可以延时一段时间再执行提交动作。

    注:自定义按钮实现提交入库事件,在 cpt 中不会触发及时校验,只能通过单独的 JS 来进行校验;而 frm 可以触发及时校验。

    2. 示例

    2.1 设计报表

    1)新建数据库查询数据集 ds1,SQL 语句为:SELECT * FROM Sales

    图片.png

    2)设计填报表格,A3 至 F3 单元格添加文本控件,将数据集字段拖入对应单元格,如下图所示:

    图片.png

    3)在 G3  单元格增加 按钮控件,G3 按钮类型选择插入行,指定单元格选择 A3,并且设置插入行的行数为 1 行,如下图所示:

    注:设置插入行的行数为 1 行,即点击增加行时只增加一行。

    图片.png

    4)在 H3 单元格增加 按钮控件 ,H3 按钮类型选择删除行,指定单元格选择 A3,如下图所示:

    图片.png

    2.2 添加事件

    1)选中 H3 单元格,在右侧选择 组件设置>事件,添加点击事件,如下图所示:

    图片.png

    JavaScript 代码如下:

    setTimeout(function(){ 
       _g('${sessionID}').writeReport();
    },2000);

    注:代码中设置了延时 2 秒才执行提交动作,用户可根据需要自行修改延时时间。

    2)如果点击删除行后,需要确认是否删除入库,则需要替换成如下代码:

    if(confirm('是否删除?'))
    {
    setTimeout(function(){ 
    _g('${sessionID}').writeReport();
    },2000);
    }
    else
    {
       
    }

    2.3 效果预览

    1)PC端

    保存模板,点击填报预览,PC 端效果如下所示:

    2020-08-27_11-39-32.gif


    2)移动端

    同时支持 App 端和 H5 端预览,效果如下图所示:

    1598346908562120.gif

    3. 模板下载

    已完成模板可参见:%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\Form\LineForm\点击按钮直接提交入库(自定义提交).cpt

    点击下载模板:点击按钮直接提交入库(自定义提交).cpt

    附件列表


    主题: 填报应用
    • 有帮助
    • 没帮助
    • 只是浏览
    • 评价文档,奖励 1 ~ 100 随机 F 豆!