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

Question

快逸报表用户在使用行式填报进行数据输入的时候，页面上往往有很多行数据。有些情况下，终端用户要批量操作很多数据，例如：删除30行数据中的28行。如果每一行点一下删除，那么网页要刷新28次，效率比较低。因此，我们给出一种可以打勾选择多行数据，集中批量操作的方案。最终效果如图，完整的demo（raq文件和jsp文件）：解决方案报表设计其中：A2设置为复选框，关值为0，开值为1。批量删除的Javascript脚本在展现的jsp文件中增加如下的脚本。
其原理是：遍历选中行，将选中行依次赋值给currCell，调用行式填报的_deleteRow(report)，依次删除，实现批量的勾选删除。function deleteRows(){
var report = document.getElementById(’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(”input”);
for(var i=0; i<objs.length; i++) {
if(objs[i].type.toLowerCase() == “checkbox” )
objs[i].checked =event.srcElement.checked;
}
}批量操作按钮设置在展现的jsp文件中增加如下的HTML文本。<table>
<tr>
<td style=”background-color:”>
<div noWrap style=”font-family:宋体;font-size:13px;color:;”>
全选:<INPUT type=”checkbox” onclick=”selcheck()”>&nbsp;
<span style=”cursor:pointer” onclick=”_insertRow( report1 )”>插入</span>&nbsp;
<span style=”cursor:pointer” onclick=”_appendRow( report1 )”>添加</span>&nbsp;
<span style=”cursor:pointer” onclick=”deleteRows()”>删除勾选</span>&nbsp;
<span style=”cursor:pointer” onclick=”_submitRowInput( report1 )”>提交</span>
</div>
</td>
</tr>
</table>这样，就轻松实现了行式填报的打勾多选（复选）和批量删除，使得报表不仅能用来展现数据和图表，而且在进行输入时也能更方便。
本文章来自快逸报表，欢迎转载，转载请注明出处。

Answer 1

批量删除很简单的嘛？谁说要那么复杂啊delete from tableName where id in("checkbox叠加id范围"),这样不过就刷新一次而已

Answer 2

将checkbox的名字设成一样，在提交页面request.getParameterValues(String name)就可以了，干嘛这么麻烦

Answer 3

你可以在http://www.quiee.com.cn/下载快逸软件。

Answer 4

简单的事情搞那么复杂
<table>
<thead>
  ......你的列名称
</thead>
<tbody id="tbody1">
  <tr>
     <td><input type="checkbox" value="your id"/></td>
     <td><input type="checkbox" value="your id"/></td>
     ............
  </tr>
  ......
</tbody>
<table>1.提交之前用一段类似的代码计算勾选项id 
<script type="text/javascript">
var aSels=[];
$$("#tbody1 input[type='checkbox']").each(oChk){
    if(oChk.checked)
        aSels.push("'"+oChk.value+"'");
});
$("selIds).value=aSels.join("");
</script>2.后台获取选中id列表并执行删除
String sql="delete from tableName where id in ("+selIds+")";
......
完事了，什么库也不依赖

Answer 5

一般都会把document.getElementsByTagName()忘了