use xtree js for create a tree
First ,you shoule download the opensource xtree.js for this function./* * WebFXTreeItem class */function WebFXTreeItem(sText, sAction, eParent, sIcon, sOpenIcon) {this.base = WebFXTreeAbstractNode;this.base(sText, sAction);/* Defaults to close */if (webFXTreeConfig.usePersistence) {this.open = (webFXTreeHandler.cookies.getCookie(this.id.substr(18,this.id.length - 18)) == '1')?true:false;} else { this.open = false; }if (sIcon) { this.icon = sIcon; }if (sOpenIcon) { this.openIcon = sOpenIcon; }if (eParent) { eParent.add(this); }} this is the main function of it. so we can create a WebFXTreeItem according to this js file.
as we prepared the source.next we should prepare some material for compose the tree. Here I use the cith shenzhen for instance.
Shenzhen have two parts: city-inside,city-outside.so their parent is Shenzhen city, and city-inside have four areas,city-outside have two area.all the areas have its singnal area number,a parent number which is very important here.
here is my implement jsp :
<%@page contentType="text/html; charset=GBK"%><%@ page language="java" import="java.lang.*,java.util.*"%><script type="text/javascript" src="js/xtree.js"></script><% List list =(List) request.getAttribute("treeList"); int size = list.size();%><script type="text/javascript">function pa_location(frame,locate){parent.frames.location=locate;}</script><script type="text/javascript"> var tree = new WebFXTree('管理系统');tree.setBehavior('classic');var a = new Array;var pidArray = new Array;var numArray = new Array;<%for(int i=0;i<size;i++){Map map = (Map)list.get(i);%>pidArray[<%=i%>]= <%=map.get("PID").toString()%>; <% }for(int i=0;i<size;i++){Map map = (Map)list.get(i);%>numArray[<%=i%>]= <%=map.get("AREANUM").toString()%>; <%}for(int i=0;i<size;i++){ Map map = (Map)list.get(i); %> if(pidArray[<%=i%>]=='0') { a[<%=i%>]= new WebFXTreeItem('<%=map.get("AREANAME")%>');tree.add(a[<%=i%>]);a[<%=i%>].action = "javascript:pa_location('mainForm','tree.do?method=showTree&areaNum=<%=map.get("AREANUM")%>')";}<% for(int j=0;j<size;j++) { Map jMap = (Map)list.get(j); %> if(pidArray[<%=j%>]==numArray[<%=i%>]){a[<%=j%>]= new WebFXTreeItem('<%=jMap.get("AREANAME")%>');a[<%=j%>].action = "javascript:pa_location('mainForm','tree.do?method=showTree&areaNum=<%=jMap.get("AREANUM")%>')";a[<%=i%>].add(a[<%=j%>]); } <% }}%></script><html> <head><link rel="StyleSheet" href="css/xtree.css" type="text/css"></head><body><table width="100%"><tr><td><script type="text/javascript">document.write(tree);</script></td></tr></table></body></html> then the tree is finished,and you also can give some link for every element. for detailed, you can see the function of javascript pa_location(), that is all
页:
[1]