use xtree js for create a tree

最新推荐文章于 2022-07-20 15:37:49 发布

女雅乱

最新推荐文章于 2022-07-20 15:37:49 发布

阅读量85

点赞数

分类专栏： JavaScript 文章标签： JavaScript CSS J# OpenSource JSP ViewUI

JavaScript 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

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