`

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

birt与jsp集成birt引入外部js、birt自定义弹出层、弹出层局部刷新 
阅读更多

             使用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="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>

<style>
  table.colour tr th {
    font-weight:bold;
  }
  
</style>
<body>

<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的用途在以上代码中有注释标注

 

 

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

分享到：
| Thread 初探
评论
2 楼 zld406504302 2012-04-09  
birt仅是一种数据展示的view，绑定了数据访问api，似的基于数据库的一些操作，通过简单的sql 就可以直接展示到页面。还有就是页面制作更加方便，简单，如果对页面样式要求不高，一般研发就可以搞定，无需ui设计。
    以上两点，我认为是birt目的。用birt做属性菜单，我没有搞过，不过我觉得用birt做不如用html标签去处理，然后嵌入到birt页面中。或者属性菜单和birt页面就完全分离。birt样式控制，还有修改，我自认为不如html标签修改方便
1 楼 xfjt297857539 2012-03-30  
请问birt 可以制作树形菜单吗？
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    web项目集成birt

    - **报表嵌入**：在Web页面中通过JavaScript API或者Servlet调用来展示BIRT报表，将报表集成到Web应用的业务流程中。 **3. 数据访问** BIRT支持多种数据源，包括关系型数据库（JDBC）、NoSQL数据库、Web服务、文件...

    birt与web项目集成

    在Web项目中集成BIRT，可以极大地提升数据可视化和业务分析的能力。以下是对两种BIRT与Web项目集成方式的详细说明： 1. **BIRT作为独立Web应用集成** 在这种集成方式中，BIRT被部署为一个独立的Web应用，然后通过...

    转：Birt接收JSP传递的参数值

    本篇文章将深入探讨如何实现Birt接收JSP传递的参数值。 首先，理解参数传递的基础原理是关键。在JSP中，可以通过HTTP请求来传递参数，比如使用`request.getParameter()`方法获取URL、表单或者查询字符串中的参数。...

    birt-jsp-tag

    4. `&lt;birt:script&gt;`：这个标签允许你在JSP页面中插入JavaScript代码，用于处理BIRT报告的事件或进行数据处理。 5. `&lt;birt:style&gt;`和`&lt;birt:css&gt;`：这两个标签用于引入样式表，可以定制BIRT报告的外观和样式。 使用...

    Java Web项目集成开源报表工具BIRT

    Java Web项目集成开源报表工具BIRT 本文将指导读者如何将BIRT开源报表工具集成到已有的Java Web项目中，以Birt4.4.2为例。下面是具体的步骤和知识点： 步骤1：下载BIRT 首先，读者需要下载BIRT的最新版本。在BIRT...

    Birt与Echarts集成.pdf

    然后，通过JavaScript脚本组装对应的Echarts组件来渲染数据，这样一来，就能够在Birt报表中展示出动态生成的图表。集成的关键在于组装Echarts的option对象，这些对象定义了图表的样式、布局、数据等信息。组装函数...

    birt jsp tag

    BIRT中JSP Tag的使用 BIRT从2.2开始(最好采用2.2M6及以后版本)，提供JSP tag的支持。 现在主要提供了以下5个JSP Tag: 1. viewer --------- 对应 frameset/run 模式，基于Ajax 2. report ---------- 对应 preview...

    BIRT的集成开发教程

    ### BIRT集成开发教程知识点详解 #### 一、BIRT概览与背景 BIRT，全称为Business Intelligence and Reporting Tool，即商业智能与报表工具，是基于Eclipse平台的开源报表解决方案。它允许开发者轻松地将报表设计...

    birt 日历控件已经实现 。资源包括：Calendar.js ，具体实现步骤：操作步骤.txt 。

    &lt;script src="birt/ajax/utility/Calendar.js" type="text/javascript"&gt; 3、修改TextBoxParameterFragment.jsp 在textbox中加入onclick事件 (encodedParameterName.indexOf("Time")&gt;=0) {%&gt; onclick="calendar()" ...

    birt与spring的集成实例可运行含源码

    将BIRT与Spring集成可以方便地在企业级应用中实现灵活、高效的报表服务。 本集成实例旨在展示如何将BIRT嵌入到Spring应用中，以实现报表的动态生成和展示。通过提供的源码，开发者可以深入理解这两个强大工具之间的...

    Pentaho cde整合Birt

    - 导出BIRT报告为Web表单，通常会得到如`birt-report.css`和`birt-report.js`这样的文件，这些文件包含了报告的样式和JavaScript逻辑。 - 在CDE中，通过`component.xml`配置文件引入BIRT报告，设置参数传递，以便...

    BIRT 集成 hibernate 实例源码

    在本实例中，我们将深入探讨如何将BIRT与Hibernate集成，以实现更高效的数据访问和报告生成。** **Hibernate是一个流行的Java ORM（对象关系映射）框架，它简化了Java应用与数据库之间的交互。通过Hibernate，...

    birt使用入门（自己手动写的包含怎样在jsp页面展示）

    **将BIRT报表集成到JSP**： 1. 将BIRT的运行时库（runtime）中的`.jar`文件复制到你的Web项目的`WEB-INF/lib`目录下。 2. 复制`birt`相关的`tld`文件到Web应用的`WEB-INF`目录下，这将允许JSP识别BIRT的相关标签。 3...

    eclipse集成birt报表时，用到的文件

    在本文中，我们将深入探讨如何在Eclipse集成Business Intelligence and Reporting Tools (BIRT)来创建和管理报表。BIRT是一款开源的报告系统，用于生成基于Web的和离线的报表，它提供了强大的数据可视化和分析功能。...

    birt 3.7 jsp 页面汉化

    标题 "BIRT 3.7 JSP 页面汉化" 指的是将 BIRT（Business Intelligence and Reporting Tools）3.7 版本中的 JSP（JavaServer Pages）页面进行中文本地化的过程。BIRT 是一个开源的报表系统，用于生成企业级的报表，它...

    在birt中添加js日期控件

    本教程将详细介绍如何在BIRT报告中集成My97DatePicker，一个流行的JavaScript日期选择器，以提供用户友好的日期输入功能。 首先，我们需要了解BIRT的基本概念。BIRT是一个开放源代码的报表系统，它允许开发人员通过...

    Birt与MyEclipse的集成及Birt的部署问题

    在本文中，我们将深入探讨BIRT（Business Intelligence and Reporting Tools）与MyEclipse的集成以及BIRT的部署问题。BIRT是一个基于Eclipse的开源报表系统，主要用于Java和J2EE Web应用程序，提供了强大的报表设计...

Magicbox
Global site tag (gtag.js) - Google Analytics