use xtree js for create a tree -

tanglei198577

浏览: 59705 次
性别:
来自: 深圳

最近访客更多访客>>

wangyy

zcm1205

wyuiew

winhkey

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

use xtree js for create a tree

博客分类：

JavaScript

JavaScript CSS J#OpenSource JSP

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

0
顶

0
踩

分享到：

Notes of hibernate about Xiaxin | The difference of some collections

2009-09-30 19:39
浏览 1993
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

use xtree js for create a tree

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

use xtree js for create a tree

评论

发表评论

相关推荐

A example of treepanel of Ext

Ext learning

JavaScript object

Send the request by XMLHttpRequest

In touch with Jquery

My opinion of how to develop the automatic tool for testing

Add or delete lines of table by JS

Save the time - by Js

最近访客更多访客>>