dtree动态生成树型结构

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

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

   1)在数据库建tree_info表,有nodeIdparentNodeIdnodeNamenodeUrl四个字段,来存储节点信息。
   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>

 



你可能感兴趣的:(JavaScript,数据结构,jsp,css,脚本)