日期:2014-05-16  浏览次数:20349 次

birt集成js、jsp,实现弹出层,局部刷新

??????????? ?使用birt已有个把月,此处和大家分享一个birt与jsp集成,实现弹出层的小功能。

?

?

?

?? 1:弹出层js ,引入到FramesetFragment.jsp中

???????? var LOCK_COUNT_OPEN = 0;
function lockScreenLayer() {
?LOCK_COUNT_OPEN++;
}
function closePopLayer(pop_div_id) {
?//多级弹出层控制
?if(LOCK_COUNT_OPEN<2) {
??document.getElementById("screenlocklayer").style.display="none";?
?}
?document.getElementById(pop_div_id).style.display="none";
?LOCK_COUNT_OPEN--;
}
/*
?*
?*弹出一个模式窗口:pop_div_id:展示层div 的id;oper_height:控制弹出层距离容器上边缘的高度;
?*oper_width:控制弹出层距离外容器左边缘的距离;div_height:弹出层高度;div_width:弹出层宽度;titleName:
?*弹出层页面title名称;url:iframe src的value
?*/
function openSinglePopLayer(pop_div_id,oper_height,oper_width,div_height,div_width,titleName,url) {
?document.getElementById("screenlocklayer").style.display="block";
?var pop_div = document.getElementById(pop_div_id);
?var topvalue = document.documentElement.scrollTop+(document.documentElement.clientHeight-parseInt(oper_height))/2;
?var leftvalue =document.documentElement.scrollLeft+(document.documentElement.clientWidth-parseInt(oper_width))/2;

//控制外围高度
?pop_div.style.top=topvalue;

//控制左边距
?pop_div.style.left=leftvalue;

//控制弹出层的宽度
?pop_div.style.width=div_width;

//控制弹出层的高度,不建议auto
?pop_div.style.height=div_height;

//控制显示
?pop_div.style.display="block";
?var url_path = document.getElementById("url_path").value;

?//页面首次加载刷新iframe,进入action中获取显示数据并返回

?document.frames('info_show').location.href=url_path+url;
}

?

?

2:?弹出层为一个jsp;include到FramesetFragment.jsp中

????? <%@ page language="java" pageEncoding="UTF-8"%>
<%
?String path = request.getContextPath();
?String basePath = request.getScheme() + "://"
???+ request.getServerName() + ":" + request.getServerPort()
???+ path + "/";
%>

<!-- locklayer -->
<div id="screenlocklayer" style="width:2000px; height: 2024px; position: absolute;background-color:#fff;-moz-opacity:0;opacity:.0;filter:Alpha(Opacity=0);display: none; z-index: 1">
</div>
<div id="hiddenStatInfoDiv"
?style="display: none; position: absolute; z-index: 998;padding:0px;">
<input type="hidden" value="<%=basePath%>" id="url_path">
<div class="popup" style="border:solid #ccc 1px;">
<div class="popup-header">
<h2 style="padding-top: 8px;padding-left:6px; color: #0B1746" id="titleMsg"></h2>
<a href="javascript:;" onclick="closePopLayer('hiddenStatInfoDiv')"
?title="Close" class="close-link" style="margin-top: -4px;"> <img
?src="<%=path%>/web/oam/newStyles/images/icon_closewin.gif"
?align="middle" /> </a></div>
<div class="popup-body"? style="margin-top:-10px;">
<table width="100%" height="100%" style="margin:0px;padding:0px;">
?<tr>
??<td colspan="2" align="center" valign="top" style="padding: 0px;">
??<iframe src="" id="info_show" name="info_show" scrolling="no" frameborder="no"
???style="margin:0px; padding:0px; margin: 0px; width: 100%; height:300px;border:1px solid #ccc;"></iframe>
??</td>
?</tr>
?<tr style="border: 1px solid yellow;">
??<td colspan="2" align="center" valign="middle"><a
???href="javascript:;" onclick="closePopLayer('hiddenStatInfoDiv')">
??<span class="btn_blue_ty">关 闭</span> </a></td>
?</tr>
</table>
</div>
</div>
</div>???

?

3:数据展示jsp,锚定到弹出的jsp中的iframe中,这样可以利用iframe实现局部刷新

??? <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://displaytag.sf.net/el" prefix="displa