报表展现时引用css样式

报表展现时引用css样式

2010-06-24 10:49:51   批注 (0)   收藏

用户在做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样式文件中定义的样式已成功引入到报表中。