web报表控件FineReport中如何设置批量删除

2025-10-04 15:03:04

1、首先定义复选框,然后定义一个按钮,在按钮中通过定义js来获取点选中行所在的数据,删除选中行并实现提交入库。

批量删除js函数:contentPane.deleteRows(param);

其中param为一串单元格坐标的字符串数组。 例如 [“A2”,”A3”,”A4”],即表示删除A2、A3、A4所在的记录;

“A2”,”A3”,”A4”都是扩展之后最终展示的坐标。

2、下面我们以一个实例来看下效果。

打开模板

3、修改模板

将模板修改为如下样式:

注:B1单元格控件为按钮控件,A3单元格控件为复选框控件。

web报表控件FineReport中如何设置批量删除

4、方法一:

定义复选框

在扩展数据的左边增加一个复选框,此为A3单元格,并设置左父格为B3,即每条数据左边都有一个复选框。

给复选框添加初始化后事件,js如下:

if (!window.lineboxes) {

    window.lineboxes = [];

}

lineboxes[lineboxes.length] = this;

定义一个全局变量lineboxes,并且与复选框绑定。

5、定义删除按钮

扩展数据的上面增加一个按钮,此选B1单元格,按钮名字设为“删除勾选”,按钮类型选择普通。

6、增加事件

增加一个点击事件,js如下:

if(window.lineboxes) {

    var cells = [];

    for (var i = 0; i < lineboxes.length; i++) {

if (lineboxes[i].selected()) {

   cells[cells.length] = lineboxes[i].options.location;

        }

    }

    contentPane.deleteRows(cells); //批量删除选中的记录

    contentPane.writeReport(); //保存到数据库,实现的是工具栏中提交的操作

}

通过js将复选框与上面的按钮联接起来。点击按钮时,会生成一串勾选了的复选框所在的单元格坐标所组成的字符串数组。然后批量删除选中的记录。

7、方法二

给B1单元格按钮的名字设为“删除勾选”,按钮类型为普通,增加一个点击事件,js如下:

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");     //给选中的单元格加上id的属性

     if (id) {

      darray.push(id);     //将选中的id放入到数组中

     }

}

contentPane.deleteReportRC(null,darray); //第二个参数为批量删除的选中行

contentPane.writeReport(); 

8、预览效果

点击填报预览效果如下图,批量选中复选框后,点击删除勾选按钮即可删除勾选的复选框。

web报表控件FineReport中如何设置批量删除

声明:本网站引用、摘录或转载内容仅供网站访问者交流或参考,不代表本站立场,如存在版权或非法内容,请联系站长删除,联系邮箱:site.kefu@qq.com。
猜你喜欢