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

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

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

"

" + ds.Select(HTML) + "

"

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

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

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

Html代码

//这里采用tag样式在jsp中渲染润乾报表，本人将在另外的文章中介绍

//润乾报表的其他几种渲染技术，诸如JS方式，API方式等等，

funcBarFontSize="13"

reportFileName="test.raq"

name="report1"/>

Js代码

//首先声明，下面这段JS代码必须放置在润乾报表渲染区域的下面，这样才能保证这段JS代码对上面的设置生效。

var objList  = document.getElementsByTagName("DIV");

for(var i = 0; i

{

if(objList[i].className == "htmlCont")

{

var divHeight = objList[i].scrollHeight;

var parentNode = objList[i].parentNode;

parentNode.style.height = divHeight;

}

}

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

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