快逸报表工具

 

在Web报表中常常会设计一些用以比较和联系一些在设计过程中类似或者有关联的报表，多数报表工具都是做多个报表，单独发布后进行比较，这样很不方便。但是快逸报表提供了类似于Excel的sheet标签页的报表组功能，将多个独立的报表放在一个报表组内统一发布，这样就很容易对类似或有关联的报表进行对照。

因有这个使用很方便的功能，不同的客户就有不同的需求，比如报表组标签页的样式。

 

快逸报表提供的tab标签页样式当前页与其他页的区别方式是：当前页的字体颜色更改为红色。尽管如此，有的客户还是感觉在web上的展现效果不是很好，而想实现一种类似button样式的tab标签。

本文将介绍快逸报表报表组自定义tab样式的实现方式，首先看一下快逸报表报表组标签页默认样式与自定义样式对照图：

默认标签页样式图：

自定义标签页（类似button按钮）样式图：

下面以一个例子(报表组包含三个报表)来说明如何实现：

概括一下思路来说，就是使用Javascript控制tab标签页的CSS样式，比如当前默认选中标签页为tab1，当点击tab2时，tab1失去焦点，而tab2得到焦点，此时就要更换两个标签页的CSS样式，从而达到更换显示样式的效果，并且每个标签页的用CSS控制显示成类似button的效果。

初始化状态下，tab1得到焦点时的效果图：

焦点从tab1转移到tab3后的效果图：

 

接下来的内容将具体介绍操作步骤：

1：查看快逸报表报表组标签页默认效果下的代码

当使用快逸<report:Group>标签发布报表组时，后台会根据报表组内报表的逻辑名生成如下部分代码（查看方式：在web展现页面内”右键”，选择”查看源文件”）：

<style>

//style内是对tab标签页的基本样式设置，显示效果可以参考默认样式图

#rq_tabs{background:#F4F7FB;font-size:12px;font-family:宋体;line-height:normal;

border-bottom:1px solid #BCD2E6; }

#rq_tabs label { margin:0;padding:0; }

#rq_tabs a { float:left;background:url(”http://127.0.0.1:6001/demo/images/rq_tableft1.gif”)

no-repeat left top;margin:0;padding:0 0 0 4px;text-decoration:none;}

#rq_tabs a span { float:left;background:url(”http://127.0.0.1:6001/demo/images/rq_tabright1.gif”)

no-repeat right top;padding:5px 15px 4px 6px;color:black; }

#rq_tabs a:hover { background-position:0% -42px; }

#rq_tabs a:hover span { background-position:100% -42px; color:black; }

#rq_tabs label.rq_curr a { background-position:0% -42px; }

#rq_tabs label.rq_curr a span { background-position:100% -42px; color:black; }

</style>

<!-三个标签页显示在一个div内–>

<div>

<table cellspacing=0 cellpadding=0 border=0>

<tr>

<td id=rq_tabs currTableId=”item1″ tables=”item1,item2,item3″ style=”padding:1px 2px 0 2px” nowrap>

<!-tab1样式及点击动作定义，其中_crur是CSS样式，onclick是触发的事件–>

<label id=”tab_item1″ reportId=”item1″ onclick=_groupClicked(this)_curr>

<a href=” onclick=’return false;’><span>tab1 contents</span></a>

</label>

<!-tab2样式及点击动作定义，此时因tab1获取到焦点，因此，tab2没有获取到预先设置的CSS样式 –>

<label id=”tab_item2″ reportId=”item2″ onclick=_groupClicked(this)>

<a href=” onclick=’return false;’><span>tab2 contents</span></a>

</label>

<!-tab3样式及点击动作定义，此时因tab1获取到焦点，因此，tab3没有获取到预先设置的CSS样式 –>

<label id=”tab_item3″ reportId=”item3″ onclick=_groupClicked(this)>

<a href=” onclick=’return false;’><span>tab3 contents</span></a>

</label>

</td>

</tr>

</table>

</div>

其中<style>内是对tab标签栏(rq_tabs)的样式设定，三个<label>是发布的报表组内的三张报表所对应的tab标签，包括样式及点击时要做的动作。其中选中的当前页的样式（css类）是：_curr。

2：分析快逸报表报表组标签页默认效果下的代码

根据上面的代码，分析可以得知：每一个标签页都会在JSP内生成各自的对象名，比如”id=tab_item1″，所以我们可以使用Javascript获取到每个标签页对象，从而通过Javascript控制每个标签页的CSS样式（更改后的效果如自定义标签页样式图），而不使用默认的标签页效果。

本文中的例子实现思路如下：

（1） 设置各个标签页的CSS样式，见JSP开始部分<style>标签内容

（2） 编写点击标签页时的Javascript函数，见JSP内click1（）

（3） 通过Javascript获取每个标签页对象，并初始化CSS样式及获取到焦点时的动作

 

本示例发布报表组使用的JSP如下：

<%@ page contentType=”text/html;charset=GBK” %>

<%@ taglib uri=”/WEB-INF/runqianReport4.tld” prefix=”report” %>

<%@ page import=”java.io.*”%>

<%@ page import=”java.util.*”%>

<%@ page import=”com.runqian.report4.usermodel.Context”%>

<style>

//CSS样式属性设置

//未获取到焦点的标签页对象CSS样式

.mynormal{

display:block;

color:#444;

text-decoration:none;

font-weight:normal;

background:#ddd;

margin:0;

padding:0.25em 1em;

border-left:1px solid #fff;

border-top:1px solid #fff;

border-right:1px solid #aaa;

width:50px;

}

//获取到焦点的标签页对象CSS样式

.myhover{

text-decoration:none;

font-weight:bold;

margin:0;

padding:0.25em 1em;

border-left:1px solid #fff;

border-top:1px solid #fff;

border-right:1px solid #aaa;

width:100px;

}

//当tab1获取到焦点时的CSS样式：当鼠标移动到tab页上时，鼠标变成”小手”的效果，//点击后背景色变为深灰色（#C6C0CB）

#tab_item1 A:hover,

#tab_item1 A:active,

#tab_item1 A.here:link,

#tab_item1 A.here:visited {

background:#C6C0CB;

cursor:hand;

}

//当tab2获取到焦点时的CSS样式：当鼠标移动到tab页上时，鼠标变成”小手”的效果，//点击后背景色变为深灰色（#C6C0CB）

#tab_item2 A:hover,

#tab_item2 A:active,

#tab_item2 A.here:link,

#tab_item2 A.here:visited {

background:#C6C0CB;

cursor:hand;

}

//当tab3获取到焦点时的CSS样式：当鼠标移动到tab页上时，鼠标变成”小手”的效果，//点击后背景色变为深灰色（#C6C0CB）

#tab_item3 A:hover,

#tab_item3 A:active,

#tab_item3 A.here:link,

#tab_item3 A.here:visited {

background:#C6C0CB;

cursor:hand;

}

</style>

<html>

<body>

<center>

//以file方式发布快逸报表文件

<report:group groupFileName=”tab_style.rpg” //报表组名：tab_style.rpg

tabFontSize=”12″ //标签页上字体大小为12px

margin=”2″ //标签页之间有2px的分隔

/>

</center>

<SCRIPT LANGUAGE=”JavaScript”>

//默认情况下，初始化tab1获取当前焦点

//oldNode是指当前或发生点击标签页事件之前取得焦点的标签页对象

var oldNode = “tab_item1″;

function click1(nodeDesc) {

//将当前获取到对象的标签页赋值给newNode

var newNode = nodeDesc;

//判断，如果当前获取到焦点的新标签页对象与其之前标签页对象相同，则不进行任何操作。

//当两对象不相同时，更换两对象的CSS样式

if(newNode!=oldNode){

//设置失去焦点的标签页对象的Css样式为”myhover”，背景色为”浅灰色（#C6C0CB）”

document.getElementById( newNode ).childNodes.item(0).childNodes.item(0).className=”myhover”;

document.getElementById( newNode ).childNodes.item(0).style.background=”#C6C0CB”;

 

//设置得到焦点的标签页对象的Css样式为”mynormal”，背景色为”深灰色（# ddd）”

document.getElementById( oldNode ).childNodes.item(0).childNodes.item(0).className=”mynormal”;

document.getElementById( oldNode ).childNodes.item(0).style.background=”#ddd”;

//更换当前获取到焦点的标签页对象

oldNode = newNode;

}

}

//tab栏样式，宽度占到窗口的30%，背景色为浅灰色（# BDD9D2）

document.getElementById( “rq_tabs” ).parentNode.parentNode.parentNode.width=”30%”;

document.getElementById( “rq_tabs” ).parentNode.style.background=”#BDD9D2″;

 

//tab1样式：初始状态下显示样式背景色为”深灰色（#ddd）”，显示标签名为”tab1 contents”

document.getElementById( “rq_tabs” ).style.background=”#ddd”;

document.getElementById( “tab_item1″ ).innerHTML=”<a id=’a_item1′ href=” ><span id=’span_item1′

onclick=’click1(this.parentNode.parentNode.id);return false;’>tab1 contents</span></a>”;

document.getElementById( “tab_item1″ ).childNodes.item(0).childNodes.item(0).className=”myhover”;

document.getElementById( “tab_item1″ ).childNodes.item(0).style.background=”#C6C0CB”

//tab2样式：初始状态下显示标签名为”tab2 contents”

document.getElementById( “tab_item2″ ).innerHTML=”<a id=’a_item1′ href=” ><span id=’span_item2′

onclick=’click1(this.parentNode.parentNode.id);return false;’> tab2 contents</span></a>”;

document.getElementById( “tab_item2″ ).childNodes.item(0).childNodes.item(0).className=”mynormal”;

document.getElementById( “tab_item2″ ).childNodes.item(0).style.background=”#ddd”

//tab3样式：初始状态下显示标签名为”tab3 contents”

document.getElementById( “tab_item3″ ).innerHTML=”<a id=’a_item1′ href=” ><span id=’span_item3′

onclick=’click1(this.parentNode.parentNode.id);return false;’> tab3 contents</span></a>”;

document.getElementById( “tab_item3″ ).childNodes.item(0).childNodes.item(0).className=”mynormal”;

document.getElementById( “tab_item3″ ).childNodes.item(0).style.background=”#ddd”

//待增加的tab……

//–>

</SCRIPT>

</body>

</html>

 

总结：通过上面的介绍可以知道，快逸报表内提供的例子根据不同的客户，在不同的需求下，对于报表的展现效果是不尽相同的，快逸报表也不可能做出符合每个客户不同口味的例子。但是我们可以根据其他灵活的方式实现，本例中也是一个修改报表展现样式的普通应用，以后还有其他功能等着我们去尝试。