实现Web上行式输入打勾多选和批量删除
快逸报表用户在使用行式填报进行数据输入的时候,页面上往往有很多行数据。有些情况下,终端用户要批量操作很多数据,例如:删除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()”>
<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>
这样,就轻松实现了行式填报的打勾多选(复选)和批量删除,使得报表不仅能用来展现数据和图表,而且在进行输入时也能更方便。
更多相关文章:自定义数据填报系统 ;数据采集解决方案 ;快逸报表数据填报功能 ;普及报表系统功能说明