知识库

推荐内容

快逸做的更好

产品优势

您的位置: 首页 > 知识库 > 填报技术 > 行式填报表实现批量删除

行式填报表实现批量删除

普通的行式填报表只可以单行删除数据,但是有很多web报表用户的业务需要批量的删除,本文就来介绍一下怎样使行式填报表实现批量删除。
实现思路:
1. 在原有行式填报报表基础上增加可以多选和全选的checkbox。
2. 编写可以实现多选和全选后同时批量删除的JavaScript并插入到发布报表的jsp中。
3. 在toolbar中添加新功能的按钮。

下面根据思路来做一个例子,实现步骤如下:
首先打开快逸例子中的/基础填报/网格式填报.raq这张填报表,点击属性-报表属性,将该报表改成行式填报,在A列执行插入列的操作,调整增加列后的新的A列宽度位置,如图所示:

快逸报表行式报表<a href=复杂报表设计" target="_blank" class="quieeLink1" />设计.PNG" src="http://www.runqian.com.cn/know-how/wp-content/uploads/2009/09/xn-w0tzso9dba7039b1ead417dph322b.png" />

其中: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>

增加了全选和多选框后的行式填报表效果:

快逸报表行式报表批量删除展现效果.PNG

这样就可以实现在行式填报中增加全选/多选的checkbox了, 大大方便了web报表用户进行批量删除的操作。

本文标签:
发布日期:2009/09/22
本文分类: 填报技术