行式填报批量删除

1.1 应用场景

行式报表填报删除时，如果需要删除的内容较多，一个个点击删除比较麻烦，如何实现下图所示的批量删除操作呢？

1.2 实现思路

本文提供两种实现方法，但是思路是一致的，都是将所有勾选了复选按钮所在行的行号写进字符串数组，然后进行批量删除。

2.1 准备数据

新建普通报表，新建数据集 ds1，SQL 查询语句为：SELECT * FROM Sales

2.2 设计表格

A2 单元格添加「按钮控件」，按钮名字设置为「删除勾选」。

A3 单元格添加「复选按钮控件」，左父格设置为 B3 。

B3~G3 单元格添加「文本控件」。

表格效果如下图所示：

2.3 设置填报属性

设计器菜单栏选择模板>报表填报属性，新增「内置 SQL」提交，具体设置如下图所示：

2.4 方法一

1）选中 A3 单元格，右边属性面板选择控件设置>事件，点击「添加事件」，给复选按钮添加一个「初始化后事件」，如下图所示：

JavaScript 代码如下：

if (!window.lineboxes) {
    window.lineboxes = [];//初始化数组
}
lineboxes[lineboxes.length] = this

2）选中 A2 单元格，右边属性面板选择控件设置>事件，点击「添加事件」，给复选按钮添加一个「点击事件」，如下图所示：

JavaScript 代码如下：

if(window.lineboxes) {
  var cells = [];//建立空数组用于搜集勾选行号
  for (var i = 0; i < lineboxes.length; i++) {
      if (lineboxes[i].selected()) {//若复选框被勾选则执行以下
            //将第1个勾选行号写入数组0位置，将第2个勾选行号写入数组1位置……
          cells[cells.length] = lineboxes[i].options.location;
       }
    }
    contentPane.deleteRows(cells); //批量删除选中的记录 
    setTimeout(function() {   
      contentPane.writeReport(); //保存到数据库，实现的是工具栏中提交的操作
      }, 1000);                              
}

2.5 方法二

选中 A2 单元格，右边属性面板选择控件设置>事件，点击「添加事件」，给复选按钮添加一个「点击事件」，如下图所示：

JavaScript 代码如下：

var $span = $('.fr-checkbox-checkon');  //获取选中的复选框 
var darray = []; //新建一个数组用来存放选中的单元格所在的行号
var $tds = $("td").has($span);   //获取选中复选框所在的单元格，即选中的单元格
for (var i = 0, len = $tds.length; i < len; i ++) {    //遍历选中的单元格     
    var id = $($tds[i]).attr("id");     //获取选中的单元格所在的行号     
    if (id) {      
        darray.push(id);     //将选中的单元格所在的行号放入到数组中     
    }
}
contentPane.deleteReportRC(null,darray); //第二个参数为行号
setTimeout(function() {           //增加延时函数（功能：需要删除的列较多时，复选框上面的删除
     contentPane.writeReport();     //勾选还未执行完成，就执行填报事件，填报时找不到行号，就会报错。
}, 1000);                    //增加延时函数，保证在删除勾选事件执行完后，才执行填报事件）

2.6 效果预览

保存报表，点击「填报预览」或「新填报预览」，效果如下图所示：

注：不支持移动端。

1）方法一

已完成模板可参见：%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\Form\LineForm\行式填报批量删除-方法一.cpt

点击下载模板：行式填报批量删除-方法一.cpt

2）方法二

已完成模板可参见：%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\Form\LineForm\行式填报批量删除-方法二.cpt。

点击下载模板：行式填报批量删除-方法二.cpt