心無痕的博客

這兩天發現了dtree,做的很不錯,想和大家交流一下
下載地址：http://www.destroydrop.com/javascripts/tree/dtree.zip
或從附件里下載
看看里面的example01.html例子。
在這個基礎上我做了一個動態的樹型結構數據的展現（其實就是動態生成js代碼而已）。
java類代碼

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

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對象

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代碼

<%
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代碼

<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'