层级不固定的折叠式树形报表的实现

需求描述：

需要根据递归型数据构建树形报表，树形报表非叶子节点可展开和收缩。

递归型数据结构如下，利用id和pid定义节点和子节点关系，order为同级节点的排列顺序：

 

实现难点与重点

1.       对多层分组式（树形）报表，润乾在报表设计时需要确定层数，但是对于上面递归型的数据无法直观的确定最大层数，而且根据数据的变化，层数也会发生变化。层级不固定会给报表模板的设计带来麻烦。

2.       折叠展开功能的实现，需要自行实现js来控制节点的折叠展开功能。

 

实现思路：

1.       利用润乾报表展现递归型数据（网格式报表）

2.       利用开源的TableTree4J树形表格控件，根据报表展现数据构建树形表格数据进行展现。

具体实现：

1.       报表模板实现：

数据集：

报表模板：

 

报表展现效果：

2.       报表展现页面：

树形报表展现js函数：

function show(){

gridTree=new TableTree4J("gridTree","");

//设置表格描述

gridTree.tableDesc="<table border=\"1\" class=\"GridView\" width=\"80%\" id=\"table1\" cellspacing=\"0\" cellpadding=\"0\" style=\"border-collapse: collapse\"  bordercolordark=\"#C0C0C0\" bordercolorlight=\"#C0C0C0\" >";       

var headerDataList=new Array("序号","父节点","顺序","内容","层级");

var widthList=new Array("20%","20%","20%","20","20%");

//参数: 值数组,根id,宽度比数组,是否展开,css类名,超链接提示,超链接状态栏提示,关闭时的图标,打开时的图标)

gridTree.setHeader(headerDataList,-1,widthList,true,"GridHead","This is a tipTitle of head href!","header status text","","");                                 

//设置列样式，定义表格头每一列的样式名集合，定义表格数据每一列的样式名集合

gridTree.gridHeaderColStyleArray=new Array("","","","centerClo","centerClo");

gridTree.gridDataCloStyleArray=new Array("","","","centerClo","centerClo");

//根据报表展现结果report1内容,循环增加节点       

var mylist=document.getElementById("report1");

for (i=0; i<mylist.rows.length; i++){

   var tr=mylist.rows[i];

//根据每一行数据，构造节点值数组

  var list=new Array();

 var pid=tr.cells[1].innerText==""?-1:tr.cells[1].innerText;

 var order=tr.cells[2].innerText==""?-1:tr.cells[2].innerText;

   for(j=0;j<tr.cells.length; j++) {

      var td=tr.cells[j];

            list.push(td.innerText)

   }

//增加节点函数参数(值数组,节点id,父节点id,是否打开,排序顺序,超链接,超链接目标框架,超链接提示,超链接状态栏提示,css类名,关闭时的图标,打开时的图标)

  gridTree.addGirdNode(list,i+1,pid,null);

 

}

//树的打印函数,可在网页加载完毕后使用显示树参数(要把树打印到指定的html标签元素的id)

gridTree.printTableTreeToElement("gridTreeDiv");

}

报表展现jsp部分代码：

           <div id="gridTreeBtn" class="btnDiv" >

                    <span class="items">表格树</span><br/>

                    <input type="button" value="展示一个标准表格树" οnclick="show()" />&nbsp;&nbsp;

                    <a  href="javascript:gridTree.openAllNodes()">展开所有</a> |

                    <a  href="javascript:gridTree.closeAllNodes()">关闭所有</a>

           </div>

           <div id="gridTreeDiv"  >                  </div>

           <p/>

           <p/>

<!—隐藏报表模板展现结果-->

           <div style="display:none">

<report:html name="report1" reportFileName="treereport.raq"

                    funcBarLocation="no"

                    needPageMark="yes"

                    generateParamForm="no"

                    width="-1"

                    needImportExcel="yes"

                    exceptionPage="/reportJsp/myError2.jsp"

           />

 

实现效果：

全部展开：

附录:

TableTree4J树设置说明

config.treeMode: 树的显示模式,值: "GRID"|"MENU"
config.treeStyle: 树的样式,值: "GRIDTREESTYLE"|"MENUTREESTYLE"
config.dafultTarget: 树的超链接默认目标,值: null|String
config.rootNodeBtn: 根节点按钮是否显示,值: true|false
config.folderAutoUrl: 可折叠节点是否自动加链接,值: true|false
config.nodeHrefSelectBg: 选中的页节点是否加背景色高亮,值: true|false
config.hrefOnfouceLine: 选中的超链接文字是否显示虚线边框,值: true|false
config.hrefIconOnfouceLine: 选中的超链接图标是否显示虚线边框,值: true|false
config.showTipTitle: 超链接是否显示提示,值: true|false
config.showStatusText: 超链接是否显示状态栏提示,值: true|false
config.inOrder: 节点是否排序,值: true|false
config.useCookies: 节点是否使用cookies保存节点展开或关闭的状态,值: true|false
config.cookieTime: 保存的cookie生存期,值: 30*24*60*60*1000
config.useIcon: 节点是否使用图标,值: true|false
config.useLine: 树是否显示连接节点的虚线,值: true|false
config.booleanInitOpenAll: 树初始化时是否展开所有节点,值: true|false
config.booleanHighLightRow: 高亮鼠标所在行,值: true|false
config.highLightRowClassName: 高亮鼠标所在行使用的样式,值: "GridHighLightRow"
setImgRootPath(path): 设置更改节点图标的根目录,参数: path 路径

 

应用例子：

改变config.inOrder，默认值为true，会根据节点数组中的排序进行排序，如果在js函数中利用代码gridTree.config.folderAutoUrl=false;那么就不会进行排序。如本例中如果进行排序后以及节点排序为

当设置不排序后，会根据添加节点的顺序进行展现

 

其他更多例子可以通过改变设置属性进行测试验证。

 

文章附件中含有TableTree4J 的源代码，其中包括API文档和多种展现例子供参考。

转载于:https://www.cnblogs.com/javaReport/archive/2012/04/19/2457247.html