行式填报表利用JS函数实现批量删除功能

普通的行式填报表利用润乾自带的删除按钮只可以单行删除数据，但是有很多web报表用户的业务需要批量的删除，本文就来介绍一下如果利用JS函数来实现行式填报表的批量删除功能。

实现思路：

1.要批量删除,首先要批量选择,那么就要编写一个批量选择的按钮（这里我们以全选按钮为例）。

2.利用润乾自带的行删除函数，结合全选按钮，来达到批量删除的目的。

其中：A2单元格需要在填报属性中把编辑风格设置为复选框，关值为0，开值为1。

第一步：编写批量删除的js函数：

原理：遍历选中行，将选中行依次赋值给currCell，调用行式填报的_deleteRow(report)，依次删除，实现批量删除效果。

批量删除的js代码如下：

function deleteRows(){

var report = document.getElementById(’report1′);

for(var i=report.rows.length-1;i>0;i-){

var row = report.rows[i];

if(!row.all.tags(”input”)[0].checked) continue;

var cell = row.cells[1];

report.currCell = cell;

_deleteRow(report);

}

}

第二步：增加全选的chekbox按钮：

全选按钮调用的js函数代码如下：

function selcheck() {

var objs = report1.getElementsByTagName(”input”);

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

if(objs[i].type.toLowerCase() == “checkbox” )

objs[i].checked =event.srcElement.checked;

}

}

第三步：页面按钮代码设置如下：

<table>

<tr>

<td style=”background-color:”>

<div noWrap style=”font-family:宋体;font-size:13px;color:;”>

全选:<INPUT type=”checkbox” onclick=”selcheck()”>

<span style=”cursor:pointer” onclick=”_insertRow( report1 )”>插入</span>

<span style=”cursor:pointer” onclick=”_appendRow( report1 )”>添加</span>

<span style=”cursor:pointer” onclick=”deleteRows()”>删除勾选</span>

<span style=”cursor:pointer” onclick=”_submitRowInput( report1 )”>提交</span>

</div>

</td>

</tr>

</table>

经过增加全选按钮后，页面显得很简洁，并且再也不用点一行删除一行了，结合润乾自带的内置JS函数，配合一些自定义的函数，可以实现丰富多样的业务功能。