`
hasi
  • 浏览: 57995 次
  • 性别: Icon_minigender_1
  • 来自: 北京(老家内蒙古)
社区版块
存档分类
最新评论

树型结构数据展现

数据结构DojoAjaxCSSSQL 
阅读更多
这两天发现了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'
  • dtree.zip (14.6 KB)
  • 描述: dtree.zip
  • 下载次数: 1420
分享到：
| 两个系统之间的通讯问题
评论
23 楼 xieye 2007-05-09  
我自己的实现：http://www.iteye.com/topic/77760
22 楼 liuganquan 2007-04-24  
xtree 和 xloadtree 是不一样的，xloadtree是用ajax实现分级展示节点，而xtree是一次性导入所有节点。
用xloadtree显然比xtree好
我是用java先取数据库当前节点的数据，然后生成xml，用xloadtree读取xml数据展示
21 楼 lumi 2007-04-24  
呵呵，我也做了一棵树，有空的时候整理一下，跟大家交流交流！
20 楼 soleegn 2007-04-13  
dtree的效率确实慢的可怕，以前用过1K的数据就完了，总是要等待树的出现！
19 楼 loaer 2007-02-02  
xtree是有问题的，数据量大的时候，我正试其它方法
18 楼 boogie 2006-12-31  
dengyin2000 写道
在一个rss reader中用了dojo的treev3。 支持dnd， inlineeditor 编辑treenode


以下这帖里有我用dojo实现的树：

利用Dojo和JSON建立无限级AJAX动态加载的功能模块树

效果图：


下载：
DEMO及源代码dojotree.rar下载
17 楼 seagar 2006-11-07  
用过XLoadTree做过树，不过就没有带checkbox.
哪个开发过带checkbox的XLoadTree，给个例子参考一下~~
16 楼 happycpa 2006-11-07  
这个软件中也有一颗树，是分次按需载入的,在firefox 中支持键盘操作:
https://sourceforge.net/projects/sitast/
15 楼 hasi 2006-11-07  
dhj1 写道
小题大作了! JAVASCRIPT的dtree,本身就是一个数形结构的表示.只要把存在数据库中树结构的所有记录,把记录的id和parentId顺序写成JS就可以表现树形构了. 怎会看到你写了一大段JAVA程序代码?

引用
把记录的id和parentId顺序写成JS
不需要java代码吗?在JS里读数据库?
14 楼 Eden 2006-11-06  
Ivan Li 写道
try this one
http://www.scbr.com/docs/products/dhtmlxTree/index.shtml
应该可以满足上面提到的所有的要求

我们目前的项目用的就是这个，checkbox和单选都可以自由定制，唯一要做的就是从数据库动态生成XML而已
13 楼 penguin 2006-11-04  
对树的处理又多了一个选择，不错哦:)
12 楼 IvanLi 2006-11-03  
try this one
http://www.scbr.com/docs/products/dhtmlxTree/index.shtml
应该可以满足上面提到的所有的要求
11 楼 dengyin2000 2006-11-03  
在一个rss reader中用了dojo的treev3。 支持dnd， inlineeditor 编辑treenode
10 楼 叶子 2006-11-03  
测试了下

500条时候尚可

1k条时候就提示执行时间过长了＝___＝
9 楼 yfmine 2006-11-03  
叶子 写道

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

哦,这倒没注意,我觉得似乎是与dtree的递归实现有关.遇到速度慢时我们换用了xtree,扩展性不错,速度也很快.但是需要预先在服务器端把节点数据排序,也许可以修改下.不过后来都改用xmlhttp动态读取了...
8 楼 hasi 2006-11-03  
叶子 写道
yfmine 写道
dtree性能太低,刚上千条的树就构不出来了,小声问一句:这种一次性取出数据并且不需要预先排序的js树还有其它现成的么?


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

好啊,期待ing
7 楼 叶子 2006-11-03  
yfmine 写道
dtree性能太低,刚上千条的树就构不出来了,小声问一句:这种一次性取出数据并且不需要预先排序的js树还有其它现成的么?


有一个。不过哪日有空我测试看看上万。如果还可以就放出。
有时候速度慢和css渲染有关。。
6 楼 大地之子 2006-11-03  
对于树状结构，我同意 stone ，我们的项目中也这样用，采用数据岛感觉挺方便的
5 楼 pedestrian_I 2006-11-03  
xtree不错的，也做过类似加上checkbox的扩展，速度上还可以。
PS：tree是一个经久不衰的问题啊。
4 楼 yfmine 2006-11-03  
dtree性能太低,刚上千条的树就构不出来了,小声问一句:这种一次性取出数据并且不需要预先排序的js树还有其它现成的么?
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    delphi 树型控件自动根据数据集生成树型结构

    本文将详细讲解如何在 Delphi7 中使用树型控件，并自动根据数据集生成树型结构。 首先，理解 TTreeView 控件的基本操作。TTreeView 提供了一个可视化的组件，用于展示具有父节点和子节点的关系的数据。每个节点表示...

    简单js树型结构好用

    在网页开发中，树型结构是一种常见的数据展示...在这个过程中，JavaScript与服务器端语言紧密协作，实现了动态加载和展示树型结构数据的功能。通过不断优化和扩展，可以构建出功能强大、用户体验良好的树型结构应用。

    jquery-TreeTable树型结构 源码及示例

    这个"jquery-TreeTable树型结构 源码及示例"压缩包包含了实现这一功能的核心源码和示例，帮助开发者更好地理解和应用这个插件。 首先，jQuery TreeTable的基本概念是利用HTML表格的特性，通过添加特定的CSS类和使用...

    MFC树型结构图

    在MFC中，树型结构图常用于展现层次化的数据，比如文件系统目录结构。CTreeCtrl类提供了创建、管理这种结构的功能。下面将详细介绍MFC中的树型结构图及其相关知识点： 1. **CTreeCtrl类**：这是MFC提供的用于操作树...

    WPF treeview树型结构demo

    在C#编程环境下，WPF提供了一种直观的方式来构建和操作树型结构，使得开发者能够轻松地展示和管理复杂的数据模型。 **1. WPF TreeView概述** TreeView是WPF中一个可视化控件，它允许用户以树形结构显示数据。每个...

    winform 知识库 TreeView树型结构

    在Windows Forms（Winform）开发中，`TreeView`控件是一种常见的用户界面元素，用于展示层级关系的数据。这个知识库主要关注如何在...在实际应用中，开发者可以根据需求灵活运用这些知识来创建和操作树型结构数据。

    delphi的TreeView的树型结构

    总之，Delphi的TreeView组件是构建树形用户界面的强大工具，通过熟练掌握其属性、方法和事件，开发者能够创建出直观且交互性强的树型结构界面。在实际项目中，结合具体的业务需求，可以灵活地扩展和定制TreeNode的...

    [新闻文章]树型结构自动生成HTML系统_phptree.zip

    【标题】：“树型结构自动生成HTML系统_phptree.zip”指的是一个用于将树状数据结构转换为HTML展示的PHP程序。在Web开发中，这种系统可以帮助开发者将数据库中的层次化数据，如分类目录、组织架构等，以直观的HTML树...

    如何展开存储在数据库中的树形数据结构.pdf

    树形数据结构是计算机科学中的一个重要概念，它广泛应用于表示具有层次关系的数据，如文件系统、组织结构图、家谱等。在关系数据库中，树形数据结构的实现通常采用父子关系来表示各个节点之间的层级关系。由于树形...

    jquery树型

    树型结构通常用于展现层次化信息，如文件系统、组织结构或导航菜单。在网页应用中，它可以帮助用户更直观地理解和操作复杂的数据关系。 首先，创建一个jQuery树型结构的基本步骤包括以下几个方面： 1. **HTML结构*...

    易语言树型框加入分组数据

    树型框是GUI（图形用户界面）中的一种控件，它以树状结构显示数据，通常用于展现层次关系的数据。每个节点可以有子节点，展开和折叠功能使得用户能够方便地浏览和管理大量信息。在易语言中，我们可以利用“创建树型...

    基于AJAX的动态树型结构的设计与实现

    动态树型结构的实现方案，该方案基于AsynchronousJavaScriptandXML，结合Struts框架设计实现了结构清晰、扩展性良好的多层架构，数据存储于数据库，结合XML描述树的节点信息，使得任何按预定的XML文档描述的信息都...

    易语言数据表关联树型框源码

    树型框（Tree Box）则是一种层次结构的数据展示控件，常用于文件系统、组织结构或分类信息的显示。在易语言中，树型框通常包含节点（Node）和子节点（Sub Node），通过展开和折叠节点来显示或隐藏下级数据。树型框与...

    易语言树型框超快排序源码（支持升序降序及自定义排序）

    然后，根据输入数据构建树型结构，这通常通过插入操作完成。 2. **基准元素的选择**：在树型结构中，选择基准元素可以采用中位数选择或其他策略，确保分割的子数组尽可能平衡。 3. **划分操作**：对数据进行划分，...

    datawindow树型控件.rar

    在本压缩包“datawindow树型控件.rar”中，包含了一系列与在PowerBuilder中创建和使用树型结构DataWindow相关的资源。这些资源旨在帮助开发者理解和应用DataWindow树控件，从而提供更丰富的用户界面体验。 1. **...

    电子政务-基于树型拓扑结构的配电网状态仿真评估系统.zip

    在配电网中，树型结构可以清晰地展现各级变电站、馈线、配电变压器直至终端用户的层次关系。这种结构使得信息的传递、故障的定位和资源的调配更为直观和便捷。 配电网状态仿真评估系统的核心功能包括： 1. 实时...

    精美的ajax树型菜单

    在网页设计中，树型菜单通常用于组织大量层级结构的数据，使得用户可以便捷地浏览和选择。AJAX（Asynchronous JavaScript and XML）是一种在无需刷新整个页面的情况下，能够更新部分网页的技术，它通过后台与服务器...

    C#树型GRIDVIEW(层叠表格)

    树型GridView结合了表格和树状视图的优点，它将数据以表格的形式呈现，同时又具备层级关系，使得复杂的数据结构能够清晰地展现出来。对于那些需要展示分层信息的应用，如组织结构、文件系统或者数据库中的层级关系，...

    易语言树型框全操作.7z

    6. **数据绑定**：易语言支持将树型框与数据源绑定，这样可以方便地将数据库或数组中的数据展现为树型结构。数据绑定简化了数据管理，使界面更新更自动化。 7. **自定义扩展**：除了基本功能，开发者还可以通过扩展...

    pw树型论坛程序

    程序的核心特性在于“树型”设计，它将论坛主题和回复以树状结构展现，使得用户可以清晰地看到每个主题下的子话题和回复，形成一个有层次的讨论环境。这种结构有利于保持论坛的整洁和逻辑性，便于用户寻找特定信息或...

Magicbox
Global site tag (gtag.js) - Google Analytics