JS实现删除行前先确认

1.1 问题描述

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

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

1.2 实现思路

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

2.1 准备模板

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

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

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

2.2 修改模板

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

2.3 添加按钮控件

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

2.4 添加点击事件

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

JavaScript 代码如下：

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

2.5 效果预览

2.5.1 PC 端

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

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

2.5.2 移动端

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

3.1 准备模板

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

3.2 修改模板

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

3.3 添加控件

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

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

3.4 添加点击事件

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

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 ,如下图所示：

3）右键点击 I 列，选择「隐藏」，隐藏 I3 单元格，如下图所示：

3.5 效果预览

3.5.1 PC 端

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

3.5.2 移动端

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

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