use xtree js for create a tree

tanglei198577 · 发表于 2013-1-29 07:32:09

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[frame].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

		自动登录	找回密码
密码			立即注册