dTree树型结构数据展现实现

最近发现了dtree,做的很不错,想和大家交流一下
下载地址：http://www.destroydrop.com/javascripts/tree/dtree.zip
或从附件里下载
看看里面的example01.html例子。
在这个基础上我做了一个动态的树型结构数据的展现（其实就是动态生成js代码而已）。
java类代码

Java代码
1.import java.io.Serializable;  
2.public class TreeNode implements Serializable{  
3.    private String id ;          //节点编号  
4.    private String pid ;         //父节点编号  
5.    private String name ;        //节点名称  
6.    private String url ;         //链接地址  
7.    private String title ;       //节点描述  
8.    private String target ;      //Target  
9.    private String icon ;        //图标路径  
10.    private String iconOpen ;    //展开状态下的图标路径  
11.    private String open ;        //是否展开  
12.      
13.    //构造函数  
14.    public TreeNode(){  
15.        id = "" ;  
16.        pid = "" ;  
17.        name = "" ;  
18.        url = "" ;  
19.        title = "" ;  
20.        target = "" ;  
21.        icon = "" ;  
22.        iconOpen = "" ;  
23.        open = "" ;  
24.    }  
25.    //------get set functions 
import java.io.Serializable;
public class TreeNode implements Serializable{
private String id ;          //节点编号
private String pid ;         //父节点编号
private String name ;        //节点名称
private String url ;         //链接地址
private String title ;       //节点描述
private String target ;      //Target
private String icon ;        //图标路径
private String iconOpen ;    //展开状态下的图标路径
private String open ;        //是否展开

//构造函数
public TreeNode(){
id = "" ;
pid = "" ;
name = "" ;
url = "" ;
title = "" ;
target = "" ;
icon = "" ;
iconOpen = "" ;
open = "" ;
}
//------get set functions



Java代码
1.public class TreeNodeUtil {  
2.    //返回js代码  
3.    public static String createJsArray(TreeNode[] tn , String dtree) {  
4.        if(tn == null || tn.length == 0 ){  
5.            System.out.println("TreeNode is empty");  
6.            return "";  
7.        }  
8.        StringBuffer contents = new StringBuffer(100);  
9.        contents.append("new dTree('"+dtree+"');");  
10.        for (int i = 0; i < tn.length; i++) {   
11.            contents.append("\n");  
12.            contents.append(dtree+".add('");  
13.            contents.append(tn[i].getId());  
14.            contents.append("','");  
15.            contents.append(tn[i].getPid());  
16.            contents.append("','");  
17.            contents.append(tn[i].getName());  
18.            contents.append("','");  
19.            contents.append(tn[i].getUrl());  
20.            contents.append("','");  
21.            contents.append(tn[i].getTitle());  
22.            contents.append("','");  
23.            contents.append(tn[i].getTarget());  
24.            contents.append("','");  
25.            contents.append(tn[i].getIcon());  
26.            contents.append("','");  
27.            contents.append(tn[i].getIconOpen());  
28.            contents.append("','");  
29.            contents.append(tn[i].getOpen());  
30.            contents.append("');");  
31.        }  
32.        return contents.toString();  
33.    }  
34.} 
public class TreeNodeUtil {
//返回js代码
public static String createJsArray(TreeNode[] tn , String dtree) {
if(tn == null || tn.length == 0 ){
System.out.println("TreeNode is empty");
return "";
}
StringBuffer contents = new StringBuffer(100);
contents.append("new dTree('"+dtree+"');");
for (int i = 0; i < tn.length; i++) {
contents.append("\n");
contents.append(dtree+".add('");
contents.append(tn[i].getId());
contents.append("','");
contents.append(tn[i].getPid());
contents.append("','");
contents.append(tn[i].getName());
contents.append("','");
contents.append(tn[i].getUrl());
contents.append("','");
contents.append(tn[i].getTitle());
contents.append("','");
contents.append(tn[i].getTarget());
contents.append("','");
contents.append(tn[i].getIcon());
contents.append("','");
contents.append(tn[i].getIconOpen());
contents.append("','");
contents.append(tn[i].getOpen());
contents.append("');");
}
return contents.toString();
}
}

根据实际情况生成TreeNode对象

Java代码
1.public void execute() throws EpochalException {  
2.    // TODO Auto-generated method stub  
3.    String sql = "";  
4.    String url = "" ;  
5.    sql = "SELECT id,parentId,name,seq ,remark FROM t_testtree ORDER BY  seq DESC" ;  
6.    TableData tableData = null;  
7.    TreeNode[] treeNodes = null;  
8.    try{  
9.        tableData = TableSelector.select(sql);  
10.        if(tableData!=null){  
11.            treeNodes = new TreeNode[tableData.getRowCount()] ;  
12.            for(int i = 0; i<tableData.getRowCount();i++){  
13.                treeNodes[i] = new TreeNode();  
14.                treeNodes[i].setId(tableData.getString(i,"id"));  
15.                treeNodes[i].setName(tableData.getString(i,"name"));  
16.                treeNodes[i].setPid(tableData.getString(i,"parentId"));  
17.                //根据实际情况生成连接地址  
18.                url = "programList.x?category="+tableData.getString(i,"name") ;  
19.                treeNodes[i].setUrl(url);  
20.                treeNodes[i].setTitle(tableData.getString(i,"remark"));  
21.                treeNodes[i].setTarget("_blank");//打开新窗口  
22.            }  
23.            dataBean.setParameter("treeNodeArray",treeNodes) ;  
24.        }  
25.    }catch(Exception e){  
26.        System.out.println(e.toString());  
27.    }  
28.} 
public void execute() throws EpochalException {
// TODO Auto-generated method stub
String sql = "";
String url = "" ;
sql = "SELECT id,parentId,name,seq ,remark FROM t_testtree ORDER BY  seq DESC" ;
TableData tableData = null;
TreeNode[] treeNodes = null;
try{
tableData = TableSelector.select(sql);
if(tableData!=null){
treeNodes = new TreeNode[tableData.getRowCount()] ;
for(int i = 0; i<tableData.getRowCount();i++){
treeNodes[i] = new TreeNode();
treeNodes[i].setId(tableData.getString(i,"id"));
treeNodes[i].setName(tableData.getString(i,"name"));
treeNodes[i].setPid(tableData.getString(i,"parentId"));
//根据实际情况生成连接地址
url = "programList.x?category="+tableData.getString(i,"name") ;
treeNodes[i].setUrl(url);
treeNodes[i].setTitle(tableData.getString(i,"remark"));
treeNodes[i].setTarget("_blank");//打开新窗口
}
dataBean.setParameter("treeNodeArray",treeNodes) ;
}
}catch(Exception e){
System.out.println(e.toString());
}
}

jsp这边取"treeNodeArray"后通过TreeNodeUtil类生成js代码

Java代码
1.<%  
2.TreeNode[] treeNodes = (TreeNode[])dataBean.getParameterObject("treeNodeArray") ;  
3.%>  
4.<p><a href="javascript: d.openAll();">全部展开</a> | <a href="javascript: d.closeAll();">全部关闭</a></p>  
5.<script language="javascript">  
6.d = <%=TreeNodeUtil.createJsArray(treeNodes,"d")%>  
7.document.write(d);  
8.</script> 
<%
TreeNode[] treeNodes = (TreeNode[])dataBean.getParameterObject("treeNodeArray") ;
%>
<p><a href="javascript: d.openAll();">全部展开</a> | <a href="javascript: d.closeAll();">全部关闭</a></p>
<script language="javascript">
d = <%=TreeNodeUtil.createJsArray(treeNodes,"d")%>
document.write(d);
</script>

客户端生成的js代码

Java代码
1.<script language="javascript">  
2.d = new dTree('d');  
3.d.add('1','-1','栏目','programList.x?category=栏目','','_blank','','','');  
4.d.add('2','1','电影','programList.x?category=电影','','_blank','','','');  
5.d.add('3','1','电视剧','programList.x?category=电视剧','','_blank','','','');  
6.d.add('4','1','专题','programList.x?category=专题','','_blank','','','');  
7.d.add('5','1','远程教育','programList.x?category=远程教育','','_blank','','','');  
8.d.add('6','1','期刊','programList.x?category=期刊','','_blank','','','');  
9.d.add('7','2','动作片','programList.x?category=动作片','','_blank','','','');  
10.d.add('8','2','喜剧片','programList.x?category=喜剧片','','_blank','','','');  
11.d.add('9','2','鬼片','programList.x?category=鬼片','','_blank','','','');  
12.d.add('10','3','韩剧','programList.x?category=韩剧','','_blank','','','');  
13.d.add('11','3','古装剧','programList.x?category=古装剧','','_blank','','','');  
14.d.add('12','5','英语沙龙','programList.x?category=英语沙龙','','_blank','','','');  
15.d.add('13','4','热门推荐','programList.x?category=热门推荐','','_blank','','','');  
16.d.add('14','7','港台片','programList.x?category=港台片','','_blank','','','');  
17.d.add('15','7','欧美片','programList.x?category=欧美片','','_blank','','','');  
18.d.add('16','14','成龙全集','programList.x?category=成龙全集','','_blank','','','');  
19.d.add('17','14','李连杰全集','programList.x?category=李连杰全集','','_blank','','','');  
20.document.write(d);  
21.</script> 
<script language="javascript">
d = new dTree('d');
d.add('1','-1','栏目','programList.x?category=栏目','','_blank','','','');
d.add('2','1','电影','programList.x?category=电影','','_blank','','','');
d.add('3','1','电视剧','programList.x?category=电视剧','','_blank','','','');
d.add('4','1','专题','programList.x?category=专题','','_blank','','','');
d.add('5','1','远程教育','programList.x?category=远程教育','','_blank','','','');
d.add('6','1','期刊','programList.x?category=期刊','','_blank','','','');
d.add('7','2','动作片','programList.x?category=动作片','','_blank','','','');
d.add('8','2','喜剧片','programList.x?category=喜剧片','','_blank','','','');
d.add('9','2','鬼片','programList.x?category=鬼片','','_blank','','','');
d.add('10','3','韩剧','programList.x?category=韩剧','','_blank','','','');
d.add('11','3','古装剧','programList.x?category=古装剧','','_blank','','','');
d.add('12','5','英语沙龙','programList.x?category=英语沙龙','','_blank','','','');
d.add('13','4','热门推荐','programList.x?category=热门推荐','','_blank','','','');
d.add('14','7','港台片','programList.x?category=港台片','','_blank','','','');
d.add('15','7','欧美片','programList.x?category=欧美片','','_blank','','','');
d.add('16','14','成龙全集','programList.x?category=成龙全集','','_blank','','','');
d.add('17','14','李连杰全集','programList.x?category=李连杰全集','','_blank','','','');
document.write(d);
</script>


感觉使用很方便，数据量不是很大（一般的树型结构的数据量不会很大的，数据量大了就不直观了）的情况下能够满足大多数人的需要。
注意的是root节点的pid必须为'-1'