批量删除html网页,实现Web上行式输入打勾多选和批量删除

快逸报表用户在使用行式填报进行数据输入的时候，页面上往往有很多行数据。有些情况下，终端用户要批量操作很多数据，例如：删除30行数据中的28行。如果每一行点一下删除，那么网页要刷新28次，效率比较低。

因此，我们给出一种可以打勾选择多行数据，集中批量操作的方案。

最终效果如图，完整的demo(raq文件和jsp文件)：

解决方案

报表设计

其中：A2设置为复选框，关值为0，开值为1。

批量删除的Javascript脚本

在展现的jsp文件中增加如下的脚本。

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

function deleteRows(){

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

for(var i=report.rows.length-2;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);

}

}

增加checkbox控件

在展现的jsp文件中增加如下的脚本。

function selcheck() {

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

for(var i=0; i

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

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

}

}

批量操作按钮设置

在展现的jsp文件中增加如下的HTML文本。

style=”font-family:宋体;font-size:13px;color:;”> 全选: οnclick=”selcheck()”>  report1 )”>插入   report1 )”>添加   οnclick=”deleteRows()”>删除勾选   οnclick=”_submitRowInput( report1 )”>提交

这样，就轻松实现了行式填报的打勾多选(复选)和批量删除，使得报表不仅能用来展现数据和图表，而且在进行输入时也能更方便。