dtree动态生成树型结构

pengchua

浏览: 152634 次
性别:
来自: 上海

最近访客更多访客>>

songhait

leimingchao

king114963349

2560445422

博主相关

博客

微博

相册

留言

关于我

文章分类

全部博客 (73)

社区版块

存档分类

数据结构 JavaScript CSS 脚本 JSP

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()<o:p></o:p>

Adds a node to the tree.
Can only be called before the tree is drawn.<o:p></o:p>

id, pid and name are required.<o:p></o:p>

Parameters<o:p></o:p>

Name<o:p></o:p>	Type<o:p></o:p>	Description<o:p></o:p>
id<o:p></o:p>	Number<o:p></o:p>	Unique identity number.<o:p></o:p>
pid<o:p></o:p>	Number<o:p></o:p>	Number refering to the parent node. The value for the root node has to be -1.<o:p></o:p>
name<o:p></o:p>	String<o:p></o:p>	Text label for the node.<o:p></o:p>
url<o:p></o:p>	String<o:p></o:p>	Url for the node.<o:p></o:p>
title<o:p></o:p>	String<o:p></o:p>	Title for the node.<o:p></o:p>
target<o:p></o:p>	String<o:p></o:p>	Target for the node.<o:p></o:p>
icon<o:p></o:p>	String<o:p></o:p>	Image file to use as the icon. Uses default if not specified.<o:p></o:p>
iconOpen<o:p></o:p>	String<o:p></o:p>	Image file to use as the open icon. Uses default if not specified.<o:p></o:p>
open<o:p></o:p>	Boolean<o:p></o:p>	Is the node open.<o:p></o:p>

<o:p> </o:p>

Example<o:p></o:p>

mytree.add(1, 0, 'My node', 'node.html', 'node title', 'mainframe', 'img/musicfolder.gif');<o:p></o:p>

分享到：

将Excel数据批量导入oracle数据库方法 | 利用ScriptX设置web打印格式

2007-08-06 16:46
浏览 2219
评论(0)
查看更多

发表评论

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

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论