`
tanglei198577
  • 浏览: 60284 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类

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

0
0
分享到:
评论

相关推荐

    xtree js结构树控件

    xtree js结构树控件 This new version is based on objects, so you do not create the actual html code for the tree yourself, you create an object (the tree's root folder) and then you add child items to ...

    用js写的tree组件 xtree2

    XTree2是一款基于JavaScript编写的树形组件,用于在网页中构建可交互的层次结构数据展示。这个组件的第二部分可能包含对第一部分功能的扩展或优化,将所有代码集中在一个JS文件中,便于管理和维护。在Web开发中,...

    用js写的tree组件xtree1

    **JavaScript Tree 组件详解:XTREE1** 在前端开发中,Tree组件是一种常见的UI元素,用于展示层次结构的数据,如目录、组织结构等。XTREE1是基于JavaScript编写的一个树形组件,它允许开发者轻松地在网页上创建交互...

    js树形xtree117

    "js tree" 是一种专门用于在JavaScript中实现树形控件的库,它允许开发者在网页上以图形化的方式展示和操作树形数据。 "xtree117" 可能是指这个js tree库的一个特定版本或者一个特定的使用示例。在JavaScript中,树...

    js树,xtree,纯js

    1. **纯JavaScript实现**:XTree完全使用JavaScript编写,无需依赖其他库如jQuery,这使得它能够在任何支持JavaScript的环境中运行,包括浏览器和服务器端环境如Node.js。 2. **自定义可扩展**:XTree允许开发者根据...

    XTree

    3. **tree.js**: 可能是辅助或扩展XTree功能的另一个JavaScript文件,可能包含了特定的树形结构操作或者特定类型的节点处理。 4. **xtree.css**: 这是样式表文件,用于定义XTree元素的视觉样式,包括节点的布局、...

    javascript实现的Tree

    3. **xtree2.js**:这是核心的JavaScript库,提供了Tree的实现。它包含了创建、操作和管理Tree节点的方法,如添加、删除、移动节点,以及展开和折叠节点的功能。这个库可能还处理了异步加载数据的逻辑,以便在用户...

    xtree demo

    在这个压缩包中,主要包含的文件是 "xtree.js",这是一个JavaScript库,提供了对树状数据进行操作和渲染的功能。 在Web开发中,树形结构常常用于表示具有层级关系的数据,比如文件系统、组织架构或菜单导航。xtree....

    xtree1.1和例子

    4. **xtree.js**: 这很可能是xtree主库文件,包含核心的树形结构实现,包括创建、遍历、操作节点的方法,以及事件处理等功能。 关于"WebProject"的例子,这可能是一个完整的Web项目,包含必要的HTML、CSS和...

    扩展xtree选择树

    - `xtree.js`:这是xtree的核心脚本文件,包含了实现树结构的JavaScript代码,包括节点操作、事件处理、样式应用等功能。 - `xloadvtree.js`和`xloadtree.js`:这两个文件可能用于动态加载树数据,可能是异步加载...

    xtree

    4. **遍历元素**:通过迭代器遍历xtree中的所有元素,例如`for (auto it = map.begin(); it != map.end(); ++it) { /* do something */ }`。 ### 四、xtree的应用场景 1. **数据存储**:xtree可以作为数据库的内存...

    xTree

    **xTree:JavaScript实现的树形菜单** xTree是一款基于JavaScript技术开发的树形菜单组件。在网页设计中,树形菜单通常用于组织和展示层级结构的信息,如网站导航、文件系统或者数据库结构。xTree因其简洁易用、...

    Xtree树状js class

    javascript treeview contal, ajax动态装载xml数据,速度快

    一个非常好的js解析xml生成一个tree

    - **xtree.js**和**tree.js**:这两个JavaScript文件很可能是解析XML并构建树的实现。xtree.js可能包含核心功能,而tree.js可能是辅助函数或者特定的树操作。 - **cd_catelog.xml**:这是一个XML示例文件,很可能...

    用javascript写的xtree

    JavaScript编写的`xtree`是一种基于前端的树形数据结构实现,它允许用户在网页上展示和操作层次化的数据。这种技术在Web开发中非常常见,特别是在构建具有导航菜单、文件系统视图或者组织结构图的场景下。下面将详细...

    LayUI树形下拉多选选择器扩展包

    LayUI是一款基于前端MVC模式的轻量级、模块化的前端框架,它以其简洁的API接口、良好的可扩展性和丰富的组件库深受开发者喜爱。在众多的LayUI组件中,"树形下拉多选选择器"是一个非常实用的功能,尤其在处理层次结构...

    xtree,xloadtree所需js,css,images文件和实例

    在IT行业中,XTREE和XLoadTree是一种广泛用于构建网页应用程序中的树形结构视图的JavaScript库。这些库主要用于展示层级关系数据,如文件系统、组织结构或菜单系统。它们通常与CSS样式表和图像资源结合使用,以提供...

    xtree一颗完整的树xtree+oracle+struts

    Xtree是一个JavaScript库,主要用于在Web页面上创建和管理树形结构。它提供了丰富的API,允许开发者动态添加、删除和更新节点,支持事件监听,以及自定义节点样式和行为。在Web应用中,xtree通常与后端服务配合,...

    XTree生成树状菜单

    在IT领域,尤其是在网页开发中,XTree是一种广泛使用的JavaScript库,用于创建交互式的树状菜单。这种菜单结构能够帮助用户以层次化的方式浏览和操作数据,尤其适用于组织大量分类信息,如文件系统、网站导航或者...

Global site tag (gtag.js) - Google Analytics