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[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