dtree动态生成树型结构

本文参考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');
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值