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'

    * dtree.zip (14.6 KB)
    * 描述: dtree.zip
    * 下载次数: 1203