JS实现删除行前先确认

  • 文档创建者:文档助手1
  • 编辑次数:20次
  • 最近更新:Kevin-s 于 2019-12-18
  • 1. 概述

    1.1 问题描述

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

    1.2 实现思路

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

    可以通过 contentPane.deleteReportRow() 方法进行间接的删除二次确认的操作,方法请参考:删除行操作提示并二次确认

    2. 示例

    2.1 新建模板

    以模板%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\JS\填报预览JS实例\42-JS实现插入自定义行数.cpt为例,报表样式如下所示:

    1.png

    将左侧模板数据集 ds1 中的字段拖到模板中,如下图所示:

    4.png

    2.2 PC端

    2.2.1 添加控件

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

    image.png

    2.2.2 添加点击事件

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

    image.png

    JS 代码如下所示:

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

    2.2.3 效果查看

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

    8.gif

    注1:删除行操作默认过程是页面先删除选中的行,再提交入库,因此需要延迟 2 秒,等页面删除了数据后再执行提交入库事件。

    注2:经测试,移动端不支持此 JS。

    2.3 移动端

    2.3.1 添加控件

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

    image.png

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

    image.png

    2.3.2 添加点击事件

    1)选择 H3 单元格,在右侧属性面板>控件设置>事件中,添加「点击事件」,增加参数 delRow,该参数值用公式表示为:=row(),如下图所示:

    image.png

    JS 代码如下所示:

    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

    2.3.3 隐藏 I 列

    右键点击 I 列,选择「隐藏」,如下图所示:

    image.png

    2.3.4 效果预览

    保存模板,移动端预览效果如下图所示:

    1569768759916692.gif

    3. 模板下载

    PC 端模板:

    已完成的模板,请参见:%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


    附件列表


    主题: 二次开发
    • 有帮助
    • 没帮助
    • 只是浏览