润乾报表中行式填报表如何实现批量删除
普通的行式填报表只可以单行删除数据,但是有很多web报表的业务需要批量删除,下面就通过一个简单的例子来介绍一下在润乾报表中如何实现行式填报表中的批量删除。
1、实现思路
首先,在原有行式填报报表基础上增加可以多选和全选的checkbox。
然后,编写可以实现多选和全选后同时批量删除的JavaScript并插入到发布报表的jsp中。
最后, 在toolbar中添加新功能的按钮。
2、实现步骤
第1步,新建一张行式填报表,如下图
第2步,设置A2单元格的 填报属性-编辑风格 为复选框,关值为0,开值为1,如下图
A列的复选框在报表发布后将作为每行前的选择框使用。
第3步,增加全选和多选的Chekbox,在展现报表的jsp中加入如下代码
<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”,则对该复选框进行勾选
}
}
</script>
第4步,在展现报表的jsp中增加批量删除的JavaScript
由于页面上的全选操作使用JavaScript来实现的,所以需要编写批量删除的JavaScript代码。
原理:遍历选中行,将选中行依次赋值给润乾报表的内置函数currCell,调用行式填报的_deleteRow(report),依次删除,实现批量删除效果。
在展现报表的jsp中加入代码如下
<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>
第5步,设置toolbar按钮,在展现报表的jsp的<body>中加入设置全选、删除等按钮,代码如下
<table>
<tr>
<td style=”background-color:”>
<div noWrap style=”font-family:宋体;font-size:13px;color:;”>
<!–以下按钮均是通过onclick事件来触发需要自己编写的函数以及快逸内置的函数–>
全选:<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报表用户进行批量删除的操作。