birt集成js、jsp，实现弹出层，局部刷新-优快云博客

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

1：弹出层js ，引入到FramesetFragment.jsp中

//控制外围高度
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 + "/";
%>

<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:;" οnclick="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:;" οnclick="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="display"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<base href="<%=basePath%>" target="info_show"/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="<%=path %>/web/oam/newStyles/css/jmpopups.css" type="text/css" rel="stylesheet" media="all" />
<link href="<%=path %>/web/oam/newStyles/css/layout.css" type="text/css" rel="stylesheet" media="all" />
<link href="<%=path %>/web/oam/newStyles/css/gb/type.css" type="text/css" rel="stylesheet" media="all" />
<script type="text/javascript" src="<%=request.getContextPath()%>/web/comfile/js/common_displaytagURL.js"></script>
</head>

<input type="hidden" id="title_msg" value="${title}">
<script>
parent.document.getElementById("titleMsg").innerHTML=document.getElementById("title_msg").value;
</script>
<table class="colour" cellpadding="0" cellspacing="0">
<display:table class="colour" style=" width:110%;margin:-5px auto auto -3px;border:solid 1px #ccc;" defaultsort="2" name="requestScope.dataset" id="pdData" requestURI="/op/SendRespStatAction.do" pagesize="10" size="resultSize" partialList="true">
<display:column style="width:20% ; text-align:center;" headerClass="align" title="手机号码">${pdData[0]}</display:column>
<display:column style="width:20%;text-align:center;" headerClass="align" title="${colName}">${pdData[1]}</display:column>
</display:table>
</table>
</body>
</html>

4：在birt页面的hiperlink中勾选uri ，target选择self

点击location后面的fx编写script代码：

var url = "/op/SendRespStatAction.do?operate=visit_per_count&timeType="+params["timeType"].value+"&startTime="+params["beginTime"].value+"&endTime="+params["endTime"].value+"&nmid="+params["nmid"].value+"&singleTime="+row["XTIMC"] ;
"javascript:openSinglePopLayer('hiddenStatInfoDiv',400,600,'220px','600px','visit_per_count','"+url+"');"

该script调用弹出层function，该function的用途在以上代码中有注释标注

说明：仅是通过贴出代码提供一个简单的参考，希望和大家即时分享、讨论，共同提高。