JS实现删除行前先确认

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

    1.1 问题描述

    删除行时先提示确认中,删除仅为报表页面上的删除,需要点「提交」按钮后才会入库生效。

    在对行式填报表进行操作时,希望点击删除行按钮时,弹出确认删除对话框,若点击确认则删除数据并提交入库;若点击取消,则不执行任何操作,如下图所示,该如何实现呢?

    image.png

    1.2 实现思路

    通过给删除行按钮增加一个点击事件,在 JS 中通过返回值的不同来实现不同操作。

    2. 示例 1

    2.1 准备模板

    下载内置模板:%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\JS\填报预览JS实例\42-JS实现插入自定义行数.cpt

    点击下载模板:42-JS实现插入自定义行数.cpt

    模板打开后报表样式如下图所示:

    1.png

    2.2 修改模板

    打开模板,将 ds1 中的字段拖到单元格中,如下图所示:

    4.png

    2.3 添加按钮控件

    选择 H3 单元格,在右侧「组件设置>属性」中,添加「按钮控件」,按钮类型选择「删除行」,指定单元格为 A3,如下图所示:

    image.png

    2.4 添加点击事件

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

    image.png

    JavaScript 代码如下:

    if(confirm("确认删除"))   //弹出确认删除对话框  
    {
      setTimeout(function() { 
         _g('${sessionID}').writeReport();   //执行提交入库操作
        }, 2000);
      return true;    //点击确定时,返回值为true,执行如上操作。
    }
    else
    {
       return false; //点击取消时,返回值为false,不执行操作。
    }

    2.5 效果预览

    2.5.1 PC 端

    保存模板,点击「填报预览」,效果如下图所示:

    8.gif

    注:点击「确定」,报表页面先删除数据,再执行提交入库,因此提交入库会延迟,这里设置的延迟 2 秒。

    2.5.2 移动端

    移动端及 HTML 5 效果如下图所示:

    2020-11-29_14-00-27.gif

    3. 示例 2

    3.1 准备模板

    同 2.1 节,可参考 2.1 节内容。

    3.2 修改模板

    同 2.2 节,可参考 2.2 节内容。

    3.3 添加控件

    1)选择 H3 单元格,在右侧「组件设置>属性」中,添加「按钮控件」,按钮类型选择「普通」,按钮名字为「删除行」,如下图所示:

    image.png

    2)选择 I3 单元格,在右侧「组件设置>属性」中,添加「按钮控件」,按钮类型选择「删除行」,指定单元格为 A3,如下图所示:

    image.png

    3.4 添加点击事件

    1)选择 H3 单元格,在右侧「组件设置>属性」中,添加「点击」事件,增加一个参数 delRow,参数值为=row(),如下图所示:

    image.png

    JavaScript 代码如下:

    var location = 'I'+delRow; //拼接真正的删除行按钮位置
    var content = "确认删除第"+(delRow-2)+"行数据?"; //拼接提示信息
    FR.Msg.confirm("",content,function (result) { if(result){
    contentPane.getWidgetByCell(location).fireEvent("click"); //触发真删除行按钮的点击事件 
    setTimeout(function() { 
    _g('${sessionID}').writeReport(); //执行提交入库操作    
    }, 2000);           
    }})

    2)选择 I3 单元格,在右侧属性面板>控件设置>事件中,添加「点击事件」,JS 代码为 null ,如下图所示:

    image.png

    3)右键点击 I 列,选择「隐藏」,隐藏 I3 单元格,如下图所示:

    image.png

    3.5 效果预览

    3.5.1 PC 端

    保存模板,点击「填报预览」,效果如下图所示:

    2020-11-29_18-10-05.gif

    3.5.2 移动端

    移动端及 HTML 5 效果如下图所示:

    1569768759916692.gif

    4. 模板下载

    已完成的模板,请参见:%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\JS\填报预览JS实例\45-JS实现删除行前先确认.cpt

    点击下载模板:45-JS实现删除行前先确认.cpt

    已完成的模板,请参见:%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\JS\填报预览JS实例\63-JS实现删除行前先确认.cpt

    点击下载模板:63-JS实现删除行前确认.cpt

    附件列表


    主题: 二次开发
    • 有帮助
    • 没帮助
    • 只是浏览
    • 评价文档,奖励 1 ~ 100 随机 F 豆!