进度条的困扰

hjoo · 发表于 2013-1-29 13:16:48

由于用servlet实现了Birt的viewer,想在调用servlet的时候显示查询的百分比进度条，但水平有限而且要结合AJAX（没用过）才能实现，于是放弃，想改用显示系统正在查询中这样的文本提示，等查询完了显示结果！

本来想用如下代码实现：PrintWriter pw = resp.getWriter();pw.println("系统查询中...");pw.flush();

但由于使用了IRunAndRenderTask的run方法运行报表，2者之间有问题，想查看run的源代码却一时找不到，所以只能采用比较土的方法实现了！

progessBar.jsp：

<%@page contentType="text/html;charset=GBK"%><html><title>查询进度提示</title><head><meta http-equiv="Content-Type" content="text/html; charset=GBK"><STYLE type=text/css>#loader_container { LEFT: -2px; WIDTH: 100%; POSITION: absolute; TOP: 172px; TEXT-ALIGN: center; filter:progid:DXImageTransform.Microsoft.dropShadow(OffX=2,OffY=2,Color='#999999',Positive='1'); }#loader { BORDER-RIGHT: #5a667b 1px solid; PADDING-RIGHT: 0px; BORDER-TOP: #5a667b 1px solid; DISPLAY: block; PADDING-LEFT: 0px; FONT-SIZE: 11px; Z-INDEX: 2; PADDING-BOTTOM: 16px; M ARGIN: 0px auto; BORDER-LEFT: #5a667b 1px solid; WIDTH: 130px; COLOR: #000000; PADDING-TOP: 10px; BORDER-BOTTOM: #5a667b 1px solid; FONT-FAMILY: Tahoma, Helvetica, sans; BACKGROUND-COLOR: #ffffff; TEXT-ALIGN: left }#loader_bg { FONT-SIZE: 1px; LEFT: 8px; WIDTH: 113px; POSITION: relative; TOP: 8px; HEIGHT: 7px; BACKGROUND-COLOR: #e4e7eb}#progress { FONT-SIZE: 1px; LEFT: 0px; WIDTH: 1px; POSITION: relative; TOP: 1px; HEIGHT: 5px; BACKGROUND-COLOR: black}</STYLE><SCRIPT language=JavaScript>var t_id = setInterval(animate,20);var pos=0;var dir=2;var len=0;function animate(){var elem = document.getElementById('progress');if(elem != null) {if (pos==0) len += dir;if (len>32 || pos>79) pos += dir;if (pos>79) len -= dir;if (pos>79 && len==0) pos=0;elem.style.left = pos;elem.style.width = len;}}</SCRIPT></head><BODY leftMargin=0 topMargin=0 rightMargin=0><DIV id=loader_container><DIV id=loader><DIV align=center>系统查询中请稍后 ...</DIV><DIV id=loader_bg><DIV id=progress></DIV></DIV></DIV></DIV></body></html>

然后在查询的页面中:
<div id="progessBar" style="visibility: hidden"><%@include file="/common/progessBar.jsp"%></div>

点击查询按钮：
<input type="button" id="query" name="query" value=" 查询 " class="btn-2word" >

toQuery()方法如下：
function toQuery(){ if(document.forms[0].bm.value == ""){ alert("请选择派出所"); return false; } document.getElementById('progessBar').style.visibility='visible'; window.document.getElementById("query").disabled = true; document.forms[0].action="<%= request.getContextPath() + "/ZzrkServlet" %>"; document.forms[0].submit();}
由于赶时间，只能这样实现用用了！

		自动登录	找回密码
密码			立即注册

进度条的困扰

浏览过的版块