dtree动态生成树型结构

来源：互联网发布：swiper vue.js 不兼容编辑：程序博客网时间：2024/05/18 09:20

本文参考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

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');