这两天发现了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'
分享到:
相关推荐
本文将详细讲解如何在 Delphi7 中使用树型控件,并自动根据数据集生成树型结构。 首先,理解 TTreeView 控件的基本操作。TTreeView 提供了一个可视化的组件,用于展示具有父节点和子节点的关系的数据。每个节点表示...
在网页开发中,树型结构是一种常见的数据展示...在这个过程中,JavaScript与服务器端语言紧密协作,实现了动态加载和展示树型结构数据的功能。通过不断优化和扩展,可以构建出功能强大、用户体验良好的树型结构应用。
这个"jquery-TreeTable树型结构 源码及示例"压缩包包含了实现这一功能的核心源码和示例,帮助开发者更好地理解和应用这个插件。 首先,jQuery TreeTable的基本概念是利用HTML表格的特性,通过添加特定的CSS类和使用...
在MFC中,树型结构图常用于展现层次化的数据,比如文件系统目录结构。CTreeCtrl类提供了创建、管理这种结构的功能。下面将详细介绍MFC中的树型结构图及其相关知识点: 1. **CTreeCtrl类**:这是MFC提供的用于操作树...
在C#编程环境下,WPF提供了一种直观的方式来构建和操作树型结构,使得开发者能够轻松地展示和管理复杂的数据模型。 **1. WPF TreeView概述** TreeView是WPF中一个可视化控件,它允许用户以树形结构显示数据。每个...
在Windows Forms(Winform)开发中,`TreeView`控件是一种常见的用户界面元素,用于展示层级关系的数据。这个知识库主要关注如何在...在实际应用中,开发者可以根据需求灵活运用这些知识来创建和操作树型结构数据。
总之,Delphi的TreeView组件是构建树形用户界面的强大工具,通过熟练掌握其属性、方法和事件,开发者能够创建出直观且交互性强的树型结构界面。在实际项目中,结合具体的业务需求,可以灵活地扩展和定制TreeNode的...
【标题】:“树型结构自动生成HTML系统_phptree.zip”指的是一个用于将树状数据结构转换为HTML展示的PHP程序。在Web开发中,这种系统可以帮助开发者将数据库中的层次化数据,如分类目录、组织架构等,以直观的HTML树...
树形数据结构是计算机科学中的一个重要概念,它广泛应用于表示具有层次关系的数据,如文件系统、组织结构图、家谱等。在关系数据库中,树形数据结构的实现通常采用父子关系来表示各个节点之间的层级关系。由于树形...
树型结构通常用于展现层次化信息,如文件系统、组织结构或导航菜单。在网页应用中,它可以帮助用户更直观地理解和操作复杂的数据关系。 首先,创建一个jQuery树型结构的基本步骤包括以下几个方面: 1. **HTML结构*...
树型框是GUI(图形用户界面)中的一种控件,它以树状结构显示数据,通常用于展现层次关系的数据。每个节点可以有子节点,展开和折叠功能使得用户能够方便地浏览和管理大量信息。在易语言中,我们可以利用“创建树型...
动态树型结构的实现方案,该方案基于AsynchronousJavaScriptandXML,结合Struts框架设计实现了结构清晰、扩展性良好的多层架构,数据存储于数据库,结合XML描述树的节点信息,使得任何按预定的XML文档描述的信息都...
树型框(Tree Box)则是一种层次结构的数据展示控件,常用于文件系统、组织结构或分类信息的显示。在易语言中,树型框通常包含节点(Node)和子节点(Sub Node),通过展开和折叠节点来显示或隐藏下级数据。树型框与...
然后,根据输入数据构建树型结构,这通常通过插入操作完成。 2. **基准元素的选择**:在树型结构中,选择基准元素可以采用中位数选择或其他策略,确保分割的子数组尽可能平衡。 3. **划分操作**:对数据进行划分,...
在本压缩包“datawindow树型控件.rar”中,包含了一系列与在PowerBuilder中创建和使用树型结构DataWindow相关的资源。这些资源旨在帮助开发者理解和应用DataWindow树控件,从而提供更丰富的用户界面体验。 1. **...
在配电网中,树型结构可以清晰地展现各级变电站、馈线、配电变压器直至终端用户的层次关系。这种结构使得信息的传递、故障的定位和资源的调配更为直观和便捷。 配电网状态仿真评估系统的核心功能包括: 1. 实时...
在网页设计中,树型菜单通常用于组织大量层级结构的数据,使得用户可以便捷地浏览和选择。AJAX(Asynchronous JavaScript and XML)是一种在无需刷新整个页面的情况下,能够更新部分网页的技术,它通过后台与服务器...
树型GridView结合了表格和树状视图的优点,它将数据以表格的形式呈现,同时又具备层级关系,使得复杂的数据结构能够清晰地展现出来。对于那些需要展示分层信息的应用,如组织结构、文件系统或者数据库中的层级关系,...
6. **数据绑定**:易语言支持将树型框与数据源绑定,这样可以方便地将数据库或数组中的数据展现为树型结构。数据绑定简化了数据管理,使界面更新更自动化。 7. **自定义扩展**:除了基本功能,开发者还可以通过扩展...
程序的核心特性在于“树型”设计,它将论坛主题和回复以树状结构展现,使得用户可以清晰地看到每个主题下的子话题和回复,形成一个有层次的讨论环境。这种结构有利于保持论坛的整洁和逻辑性,便于用户寻找特定信息或...