`

dtree动态生成树型结构

    博客分类:
  • js
阅读更多

本文参考http://www.hikersblog.com/blog/user1/13/archives/2005/4244.shtml 以表谢意

dtree是一个免费的javascript脚本,只需定义有限的几个参数,就可以做出漂亮的树型菜单。下载目录:http://www.destroydrop.com/javascripts/tree/

   1)在数据库建tree_info表,有nodeId,parentNodeId,nodeName,nodeUrl四个字段,来存储节点信息。
   2)编写java类,用于从数据库找出节点信息,并且生成javascript脚本。
关键方法为:

 

public static String createTreeInfo(List alist) ...{
        StringBuffer contents = new StringBuffer();
        contents.append("<!-- ");
        contents.append("d=new dTree('d'); ");// create a array in
                                                    // javascript
        TreeInfo info = null;
        for (int max = alist.size(), i = 0; i < max; i++) ...{
            info = (TreeInfo) alist.get(i);
            // define elements of array
            contents.append("d.add("+info.getNodeId()+",");
            contents.append(info.getParentId()+",");
            contents.append("'"+info.getNodeName()+"',");
            contents.append("'"+info.getUrl()+"'");
            contents.append("); ");
        }
        contents.append("document.write(d); ");
        contents.append("//-->");
        return contents.toString();
    }

3)再通过标签


public class TreeTag extends TagSupport...{
public int doEndTag() throws JspException ...{
  StringBuffer tree = new StringBuffer();
  tree.append("<div class="dtree"> ");
  tree.append("<script type="text/javascript"> ");
  tree.append(TreeUtil.createTreeInfo(TreeUtil.retrieveNodeInfos()));
  tree.append("</script> ");
  tree.append("</div> ");
  try...{
   pageContext.getOut().println(tree.toString());
  }catch(IOException ioe)...{
   ioe.printStackTrace();
  }
  return super.doEndTag();
}


}
test.jsp

<%@ page language="java"%>
<%@ taglib uri="/WEB-INF/tree.tld" prefix="tree"%>

<html>
<head>
  <title>Tree example</title>
  <link rel="StyleSheet" href="dtree/tree.css" type="text/css">
  <script type="text/javascript" src="dtree/dtree.js"></script>
  </head>
<body>

<b>Tree example :</b>
<tree:init/>

</body>
</html>


关键API:

add()

Adds a node to the tree.
Can only be called before the tree is drawn.

id, pid and name are required.

Parameters

Name
Type
Description

id
Number
Unique identity number.

pid
Number
Number refering to the parent node. The value for the root node has to be -1.

name
String
Text label for the node.

url
String
Url for the node.

title
String
Title for the node.

target
String
Target for the node.

icon
String
Image file to use as the icon. Uses default if not specified.

iconOpen
String
Image file to use as the open icon. Uses default if not specified.

open
Boolean
Is the node open.





Example

mytree.add(1, 0, 'My node', 'node.html', 'node title', 'mainframe', 'img/musicfolder.gif');

 

 

来自:http://incan.iteye.com/blog/281397

分享到:
评论

相关推荐

    在struts里的实现dtree通用树型结构

    ### 在Struts中实现DTree通用树型结构 #### 概述 在Web应用程序开发过程中,树型结构(Tree Structure)是一种非常常见的数据展示形式,它可以帮助用户更好地组织和理解复杂的数据关系。本文将详细介绍如何在...

    js动态树型结构 树型菜单

    在这个场景下,"js动态树型结构 树型菜单"指的是使用JavaScript实现的可以动态加载、展示和操作的树状菜单系统。 树型结构是一种数据表示形式,由节点和边组成,每个节点可以有零个或多个子节点。在JavaScript中,...

    java版动态树型结构

    在Java编程领域,"java版动态树型结构"是一个常见的需求,特别是在开发用户界面或数据可视化应用时。这种树型结构通常用于展示层次化的数据,比如文件系统、组织架构或者数据库中的分类信息。在这个场景中,描述提到...

    Javascript 树型结构集合

    在本案例中,"Javascript 树型结构集合"可能包括了像dtree、treeview、menu和qqmenu等多种实现方式。这些组件通常用于Web应用程序,以图形化方式展示层次关系的信息。 1. **dtree(动态树)**:dtree是一种动态生成...

    JSP树型菜单 DTree.java源码学习

    通过解析HTML中的特定标记,DTree能够动态生成具有展开/折叠功能的节点。在example01.html中,你可以看到如何在JSP页面中引入DTree.js和相关的CSS样式文件(dtree.css)以构建树型菜单。dtree.css负责菜单的布局和...

    jquery dtree 实例 动态实现无限树形菜单(增删改查)

    在无限树形菜单的场景中,dTree能够处理大量数据并生成可无限扩展的节点结构,这对于组织和展示层次分明的数据非常有用。 要实现动态的无限树形菜单,首先需要在HTML中创建一个容器元素,然后通过JavaScript或...

    基于Java的实例源码-JSP树型菜单 DTree.zip

    7. **树型菜单实现**:DTree的实现通常涉及到递归的思想,每个节点可能包含子节点,形成一个层级结构。在JavaScript中,这通常通过对象或数组结构来表示。在JSP中,数据可能通过请求或AJAX从服务器获取,并在前端以...

    java源码:JSP树型菜单 DTree.zip

    Java源码中的JSP树型菜单DTree是一个经典的应用,常用于构建Web应用程序中的层级结构展示,如组织架构、文件目录或导航菜单等。DTree是基于JavaScript和JSP技术实现的,它通过动态加载和交互来展示树状数据结构。 1...

    基于Java+JSP树型菜单 DTree源码文件

    "基于Java+JSP树型菜单 DTree源码文件"提供了一种解决方案,它利用Java和JSP技术来创建动态的、交互式的树形菜单。下面我们将深入探讨这个主题。 Java是一种广泛使用的后端编程语言,具有跨平台的特性,常用于...

    asp.net 无限递归树型菜单... 采用dTree封装的自定义控件

    Vs2008 项目.. 2005的同志们如下使用 bin目录 找到dll,添加dll 引用后 工具栏会出现RecursiveTree该控件 拖进aspx 页面即可... 后台需要写2句代码 this.RecursiveTree1.Dataset = GetList("");...

    树型目录,权限设置通用JS实例

    为了快速生成树型目录,我们需要实现以下关键功能: 1. **递归构建**:从根节点开始,递归地为每个子节点创建新的对象,并将它们添加到父节点的子节点列表中。 2. **数据绑定**:将后台获取的扁平化数据结构转换为...

    无限级可刷新Js树型菜单

    dtree.js是一个专门用于生成树型菜单的JavaScript库,它提供了一套完整的API,包括初始化树、添加节点、删除节点、展开/折叠节点等操作。使用dtree.js,开发者可以通过JSON数据结构定义菜单的层级关系,并利用其提供...

    dtree的使用

    在Java开发中,"dtree"通常指的是用于构建动态树状结构的组件,尤其在Web应用程序中。动态树是一种交互式的用户界面元素,它允许用户以层次结构的方式查看和操作数据。在Java环境中,dtree常与JavaScript结合使用,...

    jsp动态生成目录树

    在提供的文件名`JSP与树型菜单--diegoyun`中,可能包含了一个示例JSP页面和一个用于生成树形菜单的JavaScript库,可以作为学习和实践这个过程的参考。 总结来说,利用JSP和Access数据库生成目录树,能够实现数据的...

    DTree,javascript代码,本人用过VeryGood!

    1. **树型结构**: 树形结构是一种非线性的数据结构,由节点(或称为顶点)和边组成。每个节点可以有零个或多个子节点,这样的结构非常适合表示具有层次关系的数据。 2. **JavaScript**: JavaScript是一种广泛应用于...

    无限级可刷新JS树型菜单

    在JS中,可以使用对象或者数组来表示这种结构,通过递归函数来生成和遍历树形结构。 二、动态加载与刷新 无限级树的一个挑战是如何在有限的页面空间内展示大量数据。为了优化性能,通常采用异步加载策略,只加载...

    PHP递归方法树型菜单

    通过这种方式,我们可以动态地根据数据库中的数据生成层次分明、交互性强的菜单,提高用户的操作体验。同时,这个主题涉及到的数据结构处理、前端样式设计以及交互逻辑实现,都是Web开发中不可或缺的基础技能。

    java 创建系统菜单 Dtree.js

    本文将详细介绍如何利用`Dtree.js`在Java环境中构建动态的、交互式的树型菜单,以及这个组件的一些关键特性。 首先,`Dtree.js`是一个轻量级的JavaScript库,它提供了丰富的API和可自定义的选项,使得开发者能够...

Global site tag (gtag.js) - Google Analytics