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;

//将结果写到”reportResdiv

document.getElementById(‘reportRes’).innerHTML = str;

//3秒钟刷新一次,循环调用fun()函数

setTimeout(“fun()”,3000);

}

</script>

<div id=”reportRes”> <!–该部分展现报表处理类返回的结果–></div>

报表处理类(servletgetReportRes.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方式新增组件并建立面板,如下:

五、测试结果

我们将通过增加ID10004,这样最大记录与总记录数均将变化,如下:

通过以上五个步骤我们就完成刷新无闪屏的效果,具体效果请参考附件中的例子测试。

热门文章