finereport正在试用功能扩展图表怎么删除

选择需要删除的数据？下面就通过web报表插件FineReport来进行介绍。

.

工具原料web报表插件FineReport7.1.1大小：148.2M 适用平台：windows/linux

方法/步骤分步阅读

1

/8

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

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

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

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

2

/8

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

打开模板

3

/8

修改模板

将模板修改为如下样式：

注：B1单元格控件为按钮控件，A3单元格控件为复选框控件。

4

/8

方法一：

定义复选框

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

给复选框添加初始化后事件，js如下：

if (!window.lineboxes) {

window.lineboxes = []

}

lineboxes[lineboxes.length] = this

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

5

/8

定义删除按钮

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

6

/8

增加事件

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

if(window.lineboxes) {

var cells = []

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

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

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

}

}

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

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

}

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

7

/8

方法二

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

var $span = $('.fr-checkbox-checkon')//定义选中的复选框

var darray = []

var $tds = $("td").has($span)//定义选中复选框的单元格

for (var i = 0, len = $tds.lengthi <leni ++) { //遍历选中的单元格

var id = $($tds[i]).attr("id")//给选中的单元格加上id的属性

if (id) {

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

}

}

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

contentPane.writeReport()

8

/8

预览效果

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

给删除行按钮添加一个点击事件，js代码如下：

1. setTimeout(function() {

2. _g('${sessionID}').writeReport()

3. }, 2000)

需要注意的是：需要延长2~3秒后再触发提交事件，使页面删除数据动作完成后再提交入库。

---