润乾报表中html数据类型单元格内容自动扩展的问题解决方案

【关键字】

    润乾报表;html数据类型;尺寸调整方式;按单元格内容扩大;Tomcat;MyEclipse

 

本人使用的润乾报表是4.0版本，最近在项目中碰到这样一个问题。详情如下：Oracle数据库中有个表字段为CLOB类型，里面存储的是html片段，现在需要在润乾报表中显示此字段，理所当然的方式就是在润乾报表中将对应的单元格数据类型设置为“html类型”，润乾报表会自动将html片段渲染成合理的WEB样式。由于这些html片段的大小是不一致的，所以在单元格属性中将“尺寸调整方式”设置为“按单元格内容扩大”，这样可以保证单元格高度会随着html片段的长短而动态改变，达到最佳的视觉效果。但是，现在问题出现了，“按单元格内容扩大”竟然不起作用，单元格高度一致保持着设计时的高度。而当数据类型为“文本”时这是没有问题的。

 

2010年9月7日上午，我把这个问题反馈给了润乾公司，下午他们的工程师给我回复了一个email，附带了一个report4.jar文件，说是升级文件，并建议我将此文件覆盖系统中的相同文件，然后采用新的数据类型“富文本”试试看。我试了试，“富文本”类型可以解决html片段换行的问题，但是产生了一个更加严重的问题：它会忽略掉html片段中的所有html样式元素，只保留文本，而且不支持图片渲染；这样是不行的。迫于无奈，本人决定另寻其他途径解决。

 

    经过将近三个小时的反复测试，本人终于找到了一个相对合理的解决方案，下面将详细说明此解决方案。

 

第一步， 设计润乾报表模板，并将相关单元格的数据类型设置为“HTML”类型（这里不再详细说明如何设计报表模板，请参考润乾报表相关教程）。

 

第二步， 编辑此单元格的表达式。表达式内容如下：

"<div class='HtmlContainer'>" + ds1.Select(HTML) + "</div>"

其中，ds1.Select(HTML)中的HTML为数据库表字段名称，此表达式的作用是从数据库表中取出HTML片段，并将其放置在一个DIV中，并为此DIV设置class名称HtmlContainer。

 

第三步， 保存此报表模板，暂时命名为html_test.raq，并将此报表模板文件拷贝到MyEclipse工程中，以便测试。

 

第四步， 在工程中新建一个JSP页面，然后在body区域输入下面的代码。

//这里采用tag样式在jsp中渲染润乾报表，本人将在另外的文章中介绍
//润乾报表的其他几种渲染技术，诸如JS方式，API方式等等，
<report:html 
funcBarFontSize="13" 
reportFileName="html_test.raq" 
name="report1"/>

  

 

//首先声明，下面这段JS代码必须放置在润乾报表渲染区域的下面，这样才能保证这段JS代码对上面的设置生效。
   <script type="text/javascript">
      var objList  = document.getElementsByTagName("DIV");
      for(var i = 0; i<objList.length; i++)
      {
         if(objList[i].className == "HtmlContainer")
         {
            var divHeight = objList[i].scrollHeight;
            var parentNode = objList[i].parentNode;
            parentNode.style.height = divHeight;
         }
      }
   </script>

 

 

 

上面这段JS代码的作用，首先是获取页面文档中的所有DIV元素，然后逐个进行检查，如果此DIV的className为HtmlContainer，则说明此DIV是润乾报表中刻意设置的用来处理HTML数据类型单元格无法自动扩充问题的。

那么就获取此DIV的内容高度，然后将此高度赋值给其上级元素TD（毫无疑问，润乾报表渲染后是一个table表格，所以此DIV的上级元素肯定是一个TD元素，不信你可以查看WEB的源代码），通过此动作，重新调整对应TD和TR的高度，从而达到了动态调整单元格的目的。

 

【小北 2010-09-09】