帆软单条、批量删除方案设计

1、问题描述

在对多行的网格式报表进行删除填报时，是否觉得一个一个点击删除比较麻烦；又或者点击删除行后觉得此行不应该删除的话，需要刷新页面进行重新删除。

有没有方法实现如下图批量选择需要删除的数据呢？

 

2. 实现思路
首先定义复选框，然后定义一个按钮，在按钮中通过定义js来获取点选中行所在的数据，删除选中行并实现提交入库。
批量删除js函数：contentPane.deleteRows(param);
其中param为一串单元格坐标的字符串数组。 例如 [“A2”,”A3”,”A4”]，即表示删除A2、A3、A4所在的记录；
“A2”,”A3”,”A4”都是扩展之后最终展示的坐标。

修改模板，为如下样式：



3.1 方法一：

• 定义复选框

在扩展数据的左边增加一个复选框，此为A3单元格，并设置左父格为B3，即每条数据左边都有一个复选框。
给复选框添加初始化后事件，js如下：

1. if (!window.lineboxes) {  
2. window.lineboxes = [];  
3. }  
4. lineboxes[lineboxes.length] = this;  

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

• 定义删除按钮

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

• 增加事件

增加一个点击事件，js如下：

1. if(window.lineboxes) {  
2. var cells = [];  
3. for (var i = 0; i < lineboxes.length; i++) {  
4. if (lineboxes[i].selected()) {  
5. cells[cells.length] = lineboxes[i].options.location;  
6. }  
7. }  
8. contentPane.deleteRows(cells); //批量删除选中的记录  
9. contentPane.writeReport(); //保存到数据库，实现的是工具栏中提交的操作  
10. }  

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



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

1. var $span = $('.fr-checkbox-checkon');  //定义选中的复选框  
2. var darray = [];  
3. var $tds = $("td").has($span);   //定义选中复选框的单元格  
4. for (var i = 0, len = $tds.length; i < len; i ++) {    //遍历选中的单元格  
5. var id = $($tds[i]).attr("id");     //给选中的单元格加上id的属性  
6. if (id) {  
7. darray.push(id);     //将选中的id放入到数组中  }  }  
8. contentPane.deleteReportRC(null,darray); //第二个参数为批量删除的选中行  
9. contentPane.writeReport();