潤乾報表中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的高度，從而達到了動態調整單元格的目的。