报表样式的CSS控制
润乾报表单元格样式的设置,是针对每个单元格,样式作为单元格的属性加载在单元格中。报表提供的“添加到样式”功能将定义好的单元格样式添加到样式列表里,如果其他单元格的样式与定义过的单元格样式一样,那么就不用再重复设置,直接使用定义过的样式就可以了。设置了样式之后的单元格,该样式会作为单元格属性绑定在单元格中。
目前V4的设计器提供的样式设置功能不支持单元格样式的批量修改,也不支持CSS样式文件的设计器引入,但是报表发布页面中可以引入css文件对报表样式进行整体控制。
实现思路:
报表通过tag标签发布时,tag标签的name属性值(一般情况下设置name属性为report1)是报表在网页中的标识名,报表发布后会变成html的table,其id为report1,扩展后的单元格为table的td元素并且它们具有扩展后的id命名规则。因此可以定义控制html中table元素样式的css文件,并在报表展现的页面中引入css文件,这样就可以通过css控制报表单元格的样式。
下面的例子中实现了切换css样式文件达到报表换肤效果,通过单选按钮选择就可以完成css文件对报表样式的整体控制。
实现步骤:
1. css文件定义,分别定义两个css文件(a.css,b.css),在其中进行样式定义。
可做如下定义:
body {
font: normal 11px auto “Trebuchet MS”, Verdana, Arial, Helvetica, sans-serif;
color: #4f6b72;
background: #E6EAE9;
}
caption {
padding: 0 0 5px 0;
width: 700px;
font: 15px “Trebuchet MS”, Verdana, Arial, Helvetica, sans-serif;
text-align: right;
}
a {
color: #A7C942;
text-decoration:none;
}
#report1 {
width: 800px;
padding: 1;
margin: 1;
}
#report1 td {
font: 11px “Trebuchet MS”, Verdana, Arial, Helvetica, sans-serif;
border-right: 2px solid #C1DAD7;
border-left: 2px solid #C1DAD7;
border-bottom: 1px solid #C1DAD7;
border-top: 1px solid #C1DAD7;
background: #F5FAFA;
font-size:11px;
padding: 6px 6px 6px 12px;
color: #4f6b72;
}
2. 报表模板准备
3. 报表发布jsp页面
部分代码:
<head>
<title>css样式控制</title>
<!–css文件引入–>
<link id=”cssfile” rel=”stylesheet” type=”text/css” href=”a.css”>
</head>
……
<!–用javascript动态改变link中href的内容达到css文件切换效果–>
<input type=”radio” name=”bt1″ value=”1″ onclick=”document.all.cssfile.href=’a.css’”>
a.css
<input type=”radio” name=”bt2″ value=”2″ onclick=”document.all.cssfile.href=’b.css’”>
b.css
……
<!—利用tag标签进行报表发布–>
<table align=”center” width=”100%” height=”100%”>
<caption>CSS样式切换</caption>
<tr><td>
<report:html name=”report1″ reportFileName=”<%=report%>”
funcBarLocation=”top”
needPageMark=”yes”
generateParamForm=”no”
params=”<%=param.toString()%>”
needPivot=”yes”
exceptionPage=”/reportJsp/myError2.jsp”
appletJarName=”runqianReport4Applet.jar,dmGraphApplet.jar”
/>
</td></tr>
</table>
存在问题:
以上方法会有产生一个问题,如果展现的报表模板在设计时如果设置了单元格样式,那么全局的css控制会导致在单元格中定义的样式失效。
解决办法:
1.报表模板的A4单元格设置样式,并通过“添加到样式”菜单把该样式保存到了样式列表中。
2.打开\designer\tmp\reportCellStyle.css,其中保存了样式列表中定义好的样式。将样式定义添加到全局css文件中。
如在a.css中添加如下样式定义
.style_1 {
font-family:Dialog !important;
font-size:12px !important;
visibility:visible !important;
font-weight:normal !important;
font-style:normal !important;
text-decoration:none !important;
text-indent:0.0px !important;
color:#000000 !important;
background-color:#FF6666 !important;
border-bottom-color:#808080 !important;
border-left-color:#808080 !important;
border-right-color:#808080 !important;
border-top-color:#808080 !important;
border-bottom-style:solid !important;
border-bottom-width:0.75px !important;
border-left-style:solid !important;
border-left-width:0.75px !important;
border-right-width:0.75px !important;
border-right-style:solid !important;
border-top-style:solid !important;
border-top-width:0.75px !important;
vertical-align:middle !important;
text-align:center !important;
}
4. 修改单独设置样式的单元格A2的数据类型设置为html,单元格表达式定义为=”<div class=’style_1′>”+ds1.Select(int(EMPID),false)+”</div>” ,通过html的方式应用了css样式。
实现效果
通过以上方法就可以单独控制部分单元格的样式,并也可以完成单元格样式的批量修改。如果在css文件中修改了style_1,所有应用了style_1样式的报表单元格的样式也会相应被修改。
本例具体代码实现详见附件,另外感谢衣大伟提供的实现思路。