本文主要是介绍如何做出“报表加载请稍后”的效果，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
大数据量的报表在页面加载的时候时常会遇到这样一个问题：在报表正在生成html页面的时候，由于报表正在取数计算，这时候页面是空白的，如何来增加类似加载进度条的功能呢？
下面我们来介绍一下。
整个过程都在jsp用利用Javascript来完成，与报表模版无关，这样更加方便客户调试。
首先我们要编写一下页面中Javascript的方法：
var s1 = setInterval(“loading.innerText+=’.'”, 500);
var s2 = setInterval(“loading.innerText = ””, 8000);
设定两个超时对象,s1是超时500毫秒,s2是8000毫秒
然后设置一个层,这个在超时的这段时间内显示在页面中,也就是说,在给报表计算的这段时间内,页面上只显示这个层.
document.writeln(“<div id=\”loadingDiv\” style=\”z-index:50000;position:absolute;left:expression((this.parentElement.offsetWidth-this.offsetWidth)\/2);top:expression((document.body.clientHeight-this.style.pixelHeight)\/3+document.body.scrollTop);\”>”);
document.writeln(” <table border=\”1\” width=\”260\” cellspacing=\”0\” cellpadding=\”4\” style=\”border-collapse: collapse;FILTER: Alpha(opacity=95)\” bgcolor=\”#ffffff\”>”);
document.writeln(” <tr>”);
document.writeln(” <td bgcolor=\”#2D2D2D\”>”);
document.writeln(” <table width=\”100%\” border=\”0\” cellspacing=\”0\” cellpadding=\”0\”>”);
document.writeln(” <tr>”);
document.writeln(” <td style=\”font-size:12px;color:#ffffff\”>”);
document.writeln(” 页面正在加载,请稍候…<\/td>”);
document.writeln(” <td width=\”1\”>”);
document.writeln(” <span title=关闭 style=\”CURSOR: hand;color:white;font-size:12px;font-weight:bold;margin-right:4px;\” onClick=\”document.all.loadingDiv.style.display=\’none\’\”>×<\/span> <\/td>”);
document.writeln(” <\/tr>”);
document.writeln(” <\/table>”);
document.writeln(” <\/td>”);
document.writeln(” <\/tr>”);
document.writeln(” <tr>”);
document.writeln(” <td>”);
document.writeln(” <table width=\”100%\” border=\”0\” cellspacing=\”0\” cellpadding=\”0\”>”);
document.writeln(” <tr>”);
document.writeln(” <td width=\”35\” align=\”center\”>”);
document.writeln(” <img src=\”load.gif\”> <\/td>”);
document.writeln(” <\/tr>”);
document.writeln(” <\/table><\/td>”);
document.writeln(” <\/tr>”);
document.writeln(” <\/table>”);
document.writeln(“<\/div>”)
document.writeln(“<SCRIPT LANGUAGE=\”javascript\”> “);
document.writeln(“<!– Hide “);
document.writeln(“function killErrors() { “);
document.writeln(“return true; “);
document.writeln(“} “);
document.writeln(“window.onerror = killErrors; “);
document.writeln(“\/\/ –> “);
document.writeln(“<\/SCRIPT>”);
这个层中主要就是显示了一个动态的gif图片.
接着,我们在window.onload()方法中先清除掉两个超时对象,再清楚掉”页面加载请稍后”这个层.
function window.onload()
clearInterval(s1);//清除掉超时对象
clearInterval(s2);
loadingDiv.removeNode(true);//清除掉加载层
}
然后在展现我们的报表标签:
<table align=center>
<tr><td>
<report:html name=”report1″ reportFileName=”loading.raq.raq”
needSaveAsWord=”yes”
needSaveAsPdf=”yes”
needSaveAsExcel=”yes”
wordLabel=”<%=wordImage%>”
pdfLabel=”<%=pdfImage%>”
submit=”<%=submitImage%>”
excelLabel=”<%=excelImage%>”
/>
</td></tr>
</table>
这篇关于如何做出“报表加载请稍后”的效果的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
