润乾报表中html数据类型单元格内容自动扩展

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

 

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

"<div class='htmlCont'>" + ds.Select(HTML) + "</div>"

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

 

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

 

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

Html代码  

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

  

 

Js代码  

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

 

 

 

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

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