DBD组件实现刷新无闪屏
很多客户在使用DBD后都会说组件刷新的时候有闪屏(出现空白页面)现象,问能不能不让它闪屏?
首先我们来分析一下,其实出现闪屏主要是因为整个页面整体刷新导致的,而如果我们只刷新报表部分该问题就能解决了。
解决思路:
因为目前DBD组件是刷新的整个页面,因此这个刷新我们就暂时不用了,而是我们来控制。
同时借助ajax异步加载报表部分,ajax定时将报表运算的Html结果在页面显示,这样就能解决整页面刷新,达到只定时刷新报表部分了。
下面的内容我们举例说明该需求的实现过程:
一、测试用报表设计
其中,第二行为t_res_type表中资源ID最大的记录,B3格为该表的总记录数。我们将通过新增最大资源ID记录看结果。
二、发布报表采用的JSP及报表处理类
该Jsp中主要解决Ajax方式展现报表,主要代码如下:
<script type=“text/javascript”>
fun();
var xhr;
function fun()
{
if (document.XMLHttpRequest) {
xhr = new XMLHttpRequest();
} else {
xhr = new ActiveXObject(“Microsoft.XMLHTTP”);
}
//可传递动态接收来报表
xhr.open(‘GET’,‘<%=basePath%>getReportRes.do?fileName=ziyuanleixingbiaotongji.raq’); //调用报表处理类,计算报表
//设置回调函数
xhr.onreadystatechange = function(){
var ready = xhr.readyState;
if (ready == 4){
parseCompletedResponse(xhr);
}
};
xhr.send(”);
}
function parseCompletedResponse(xhr)
{
var str = xhr.responseText;
//将结果写到”reportRes“div内
document.getElementById(‘reportRes’).innerHTML = str;
//3秒钟刷新一次,循环调用fun()函数
setTimeout(“fun()”,3000);
}
</script>
<div id=”reportRes”> <!–该部分展现报表处理类返回的结果–></div>
报表处理类(servlet:getReportRes.do)主要代码:
//返回到页面的html代码
String reportHtml = “”;
String reportN = request.getParameter(“fileName”);
Context ctx = new Context();
String ctxPath = ctx.getMainDir();
ReportDefine rd = null;
try {
//运算页面传来的报表
rd = (ReportDefine)ReportUtils.read(ctxPath+“/”+reportN);
} catch (Exception e) {
e.printStackTrace();
}
Engine engine = new Engine(rd, ctx); //
IReport iReport = engine.calc(); //
try {
//将报表生成为Html代码
reportHtml = ReportUtils.toHTMLString(iReport,“report1″,request);
} catch (Throwable e) {
e.printStackTrace();
}
PrintWriter out = response.getWriter();
//将html返回到页面
out.print(reportHtml);
三、 修改配置文件web.xml
<servlet>
<servlet-name>AjaxCalReport</servlet-name>
<servlet-class>example.AjaxCalReport</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>AjaxCalReport</servlet-name>
<url-pattern>/getReportRes.do</url-pattern>
</servlet-mapping>
四、测试面板建立
该步按照自定义Jsp方式新增组件并建立面板,如下:
五、测试结果
我们将通过增加ID:10004,这样最大记录与总记录数均将变化,如下:
通过以上五个步骤我们就完成刷新无闪屏的效果,具体效果请参考附件中的例子测试。