树型结构数据展现

这两天发现了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'

在所有的js的树的控件中,我最欣赏的是xloadtree,他可以动态加载,利用ajax的技术动态从服务器端获取数据,进行展示.
一直以来总想好好的扩展一下该树,比如加上checkbox,但是断断续续的一直没有进行到底.
楼主研究过该树么?

xloadtree只支持xml数据源，要从数据库中动态加载数据，恐怕还得做一番改造。

adf faces里的树可以动态加载，对象中有类似List getKids()这样的方法就可以了，不需要写js代码。

数据肯定要经过组织才成成树的.
十年树木,百年树人.;)
在组织的过程中就可以生成xml,过程easy!

dtree性能太低,刚上千条的树就构不出来了,小声问一句:这种一次性取出数据并且不需要预先排序的js树还有其它现成的么?

xtree不错的，也做过类似加上checkbox的扩展，速度上还可以。
PS：tree是一个经久不衰的问题啊。

对于树状结构，我同意 stone ，我们的项目中也这样用，采用数据岛感觉挺方便的

有一个。不过哪日有空我测试看看上万。如果还可以就放出。
有时候速度慢和css渲染有关。。

好啊,期待ing

哦,这倒没注意,我觉得似乎是与dtree的递归实现有关.遇到速度慢时我们换用了xtree,扩展性不错,速度也很快.但是需要预先在服务器端把节点数据排序,也许可以修改下.不过后来都改用xmlhttp动态读取了...