快逸报表工具

用户在做 web 报表开发过程中，会遇到这样一个需求：希望多个报表以相同风格的样式展现。若在报表设计器中实现，则需要对每一个报表设置一遍样式，而且还需对一些细节进行微调，过程麻烦且消耗时间。本文介绍如何在报表发布时引用统一的 css 样式，这样多个报表输出时都继承了相同的样式风格，简单化了这个需求。

首先，看如下这个报表模板。

下面介绍如何将css样式引入到上图报表中。

第一步：获得报表体的class值

查看该报表发布页面的源文件，在table标签下的每一个tr对应为报表的一条记录，如下面这段源代码，第一个tr对应报表的标题，下面对应报表的头两行数据。

<tr height=47 style=”height:47px;”>
<td colSpan=5 class=”report1_2″>订单信息表</td>
</tr>
<tr height=23 style=”height:23px;”>
<td class=”report1_1″>10523</td>
<td onmouseover=”report1416532over()” class=”report1_1″>1997-05-01</td>
<td class=”report1_1″>成先生</td>
<td class=”report1_1″>南京</td>
<td onmouseover=”report1416532over()” class=”report1_1″>技术东街&nbsp;38&nbsp;号</td>
</tr>
<tr height=23 style=”height:23px;”>
<td class=”report1_1″>10524</td>
<td onmouseover=”report1416532over()” class=”report1_1″>1997-05-01</td>
<td class=”report1_1″>李先生</td>
<td onmouseover=”report1416532over()” class=”report1_1″>昆明</td>
<td onmouseover=”report1416532over()” class=”report1_1″>临翠大街&nbsp;83&nbsp;号</td>
</tr>

看源文件是为了取得报表的class值，在css样式文件中要对这个class值设置样式，这样将css样式引入报表时，发布报表时就可将样式根据class值引用到报表中。如上面这段源代码，报表体的class值为report1_1，下面对这个报表编写一个css样式文件。

第二步：写css样式文件

这里编写一个简单的样式文件，代码如下：

.report1_1{
COLOR: Maroon;
BACKGROUND-COLOR: #FFFFCC;
}
.report1_2{
COLOR: fuchsia;
BACKGROUND-COLOR: #CCFFFF;
}

第三步：在发布报表的jsp文件中引用这个css文件

将写好的css样式文件，在发布报表所有的jsp文件中做引用，代码如下所示：

<link href=”<%=request.getContextPath()%>/testcss.css” rel=”stylesheet” type=”text/css”>

第四步：查看效果

将报表发布到web页面查看效果，如下图所示。

从上图看出，css样式文件中定义的样式已成功引入到报表中。