行式填报表实现批量删除
12.21.2009 by hewei - 0 Comment - 0Posted in web报表
普通的行式填报表只可以单行删除数据，但是有很多web报表用户的业务需要批量的删除，本文就来介绍一下怎样使行式填报表实现批量删除。 实现思路： 1. 在原有行式填报报表基础上增加可以多选和全选的checkbox。 2. 编写可以实现多选和全选后同时批量删除的JavaScript并插入到发布报表的jsp中。 3. 在toolbar中添加新功能的按钮。 下面根据思路来做一个例子，实现步骤如下： 首先打开快逸例子中的/基础填报/网格式填报.raq这张填报表，点击属性-报表属性,将该报表改成行式填报，在A列执行插入列的操作，调整增加列后的新的A列宽度位置，如图所示： 
其中：A4单元格在填报属性-编辑风格设置为复选框，关值为0，开值为1，A列的复选框在报表发布后将作为每行前的选择框使用。 第一步：增加全选和多选的Chekbox代码如下： < script language=”javascript”> 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; //如果类型为” checkbox”,则对该复选框进行勾选 } } 第二步：在展现报表的jsp中增加批量删除的JavaScript 由于对报表进行页面上的全选操作使 用JavaScript来实现的,所以需要编写批量删除的JavaScript代码，大致原理：遍历选中行，将选中行依次赋值给快逸提供的 JavaScript函数currCell，调用行式填报的_deleteRow(report)，依次删除，实现批量删除效果。 代码如下： < script language=”javascript”> function deleteRows(){ //创建删除函数 var report = document.getElementById(’report1′);/ /根据报表ID取得报表 for(var i=report.rows.length-1;i>0;i-){ //循环报表行数 var row = report.rows[i];/ /逐行取得每行的值 if(!row.all.tags(”input”)[0].checked) continue; //判断如果该行填报属性中的值为0则不作操作,也就是上文提到的复选框关值 var cell = row.cells[1]; //将值为1的单元格赋值给一个变量 report.currCell = cell; //设定这个变量为取选中单元格 _deleteRow(report); //对该单元格所在行进行删除 } } < /script> 第三步：页面toolbar按钮设置代码如下： 在展现报表的jsp中的< body>中加入设置全选、删除等按钮。 < 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> 增加了全选和多选框后的行式填报表效果： 
这样就可以实现在行式填报中增加全选/多选的checkbox了， 大大方便了web报表用户进行批量删除的操作。
其中：A4单元格在填报属性-编辑风格设置为复选框，关值为0，开值为1，A列的复选框在报表发布后将作为每行前的选择框使用。 第一步：增加全选和多选的Chekbox代码如下： < script language=”javascript”> 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; //如果类型为” checkbox”,则对该复选框进行勾选 } } 第二步：在展现报表的jsp中增加批量删除的JavaScript 由于对报表进行页面上的全选操作使 用JavaScript来实现的,所以需要编写批量删除的JavaScript代码，大致原理：遍历选中行，将选中行依次赋值给快逸提供的 JavaScript函数currCell，调用行式填报的_deleteRow(report)，依次删除，实现批量删除效果。 代码如下： < script language=”javascript”> function deleteRows(){ //创建删除函数 var report = document.getElementById(’report1′);/ /根据报表ID取得报表 for(var i=report.rows.length-1;i>0;i-){ //循环报表行数 var row = report.rows[i];/ /逐行取得每行的值 if(!row.all.tags(”input”)[0].checked) continue; //判断如果该行填报属性中的值为0则不作操作,也就是上文提到的复选框关值 var cell = row.cells[1]; //将值为1的单元格赋值给一个变量 report.currCell = cell; //设定这个变量为取选中单元格 _deleteRow(report); //对该单元格所在行进行删除 } } < /script> 第三步：页面toolbar按钮设置代码如下： 在展现报表的jsp中的< body>中加入设置全选、删除等按钮。 < 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> 增加了全选和多选框后的行式填报表效果： 这样就可以实现在行式填报中增加全选/多选的checkbox了， 大大方便了web报表用户进行批量删除的操作。