假设,最后在前台要载现的树的效果如:
// c
// --c1
// --c4
// --c5
// --c6
// --c2
// --c7
// --c3
// --c8
1.前台JS,treePanelTest.js
//定义一个异步根节点的树
Ext.onReady(function(){
var urlTreeNode = new Ext.tree.AsyncTreeNode({
text:"c",
id:"c"
});
//定义树的加载方式
var urlTreeLoader = new Ext.tree.TreeLoader({
url:"../saleInfo.do?method=qryChildNode"
});
//定义加载时附加的参数
urlTreeLoader.on("beforeload",function(tl,node){
tl.baseParams.parentId = node.attributes.id;
},this);
//开始定义要展现的树的信息
var urlTree = new Ext.tree.TreePanel({
renderTo:"urlTreePanel",
root:urlTreeNode,
width:150,
loader:urlTreeLoader
});
//处现树的其它事件,比如点击后要处理的事件
urlTree.on("click",function(node,e){
//use the url do something
console.debug(node.attributes.url);
});
})
2.前台HTML.主要是定义一个层用来加载树,当然其它的ext js要引用进来
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK">
<title>树面板</title>
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<link rel="stylesheet" type="text/css" href="../pubjs/ext/resources/css/ext-all.css">
<script type="text/javascript" src="../pubjs/ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../pubjs/ext/ext-all-debug.js"></script>
<script type="text/javascript" src="./treePanelTest.js"></script>
</head>
<body>
<div id="urlTreePanel"></div>
</body>
</html>
3.后台action,主要是取树的子节点的方法
import java.io.BufferedReader;
import java.io.IOException;
import java.io.InputStream;
import java.io.InputStreamReader;
import java.io.PrintWriter;
import java.util.ArrayList;
import java.util.Date;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
import java.util.Set;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import net.sf.json.JSONArray;
import org.apache.struts.action.ActionForm;
import org.apache.struts.action.ActionForward;
import org.apache.struts.action.ActionMapping;
import org.apache.struts.actions.DispatchAction;
import com.lin.web.common.JsonUtil;
import com.lins.j2ee.form.SaleInfoForm;
import com.lins.j2ee.mode.Order;
import com.lins.j2ee.mode.StuInfo;
public class BusiAction extends DispatchAction {
private CategoryService categoryService = new CategoryService();
public ActionForward qryChildNode(ActionMapping mapping, ActionForm form,
HttpServletRequest request, HttpServletResponse response)
throws Exception {
String id = request.getParameter("parentId");
PrintWriter out = response.getWriter();
try{
Set set = categoryService.qryChildCategory(id);
System.out.println(set);
out.write(JsonUtil.getJsonString(set));
}catch(Exception ex){
ex.printStackTrace();
}finally{
out.flush();
out.close();
}
return null;
}
}
}
4.后台service
public class CategoryService {
private Category c;
public CategoryService(){
//初始化目录,增加信息
// c
// --c1
// --c4
// --c5
// --c6
// --c2
// --c7
// --c3
// --c8
//root
c = new Category();
c.setText("c");
c.setId("c");
//first level
Category c1 = new Category();
c1.setText("c1");
c1.setId("c1");
// c1.setParentCategory(c);
Category c2 = new Category();
c2.setText("c2");
c2.setId("c2");
// c2.setParentCategory(c);
Category c3 = new Category();
c3.setText("c3");
c3.setId("c3");
// c3.setParentCategory(c);
//add first level
c.setChildCategory(new HashSet());
c.getChildCategory().add(c1);
c.getChildCategory().add(c2);
c.getChildCategory().add(c3);
//second level
Category c4 = new Category();
c4.setText("c4");
c4.setId("c4");
c4.setUrl("http://www.163.com");
c4.setLeaf(true);
// c4.setParentCategory(c1);
Category c5 = new Category();
c5.setText("c5");
c5.setId("c5");
// c5.setParentCategory(c1);
Category c7 = new Category();
c7.setText("c7");
c7.setId("c7");
c7.setUrl("http://www.163.com");
c7.setLeaf(true);
// c7.setParentCategory(c2);
Category c8 = new Category();
c8.setText("c8");
c8.setId("c8");
c8.setUrl("http://www.163.com");
c8.setLeaf(true);
// c8.setParentCategory(c3);
//add second level
c1.setChildCategory(new HashSet());
c1.getChildCategory().add(c4);
c1.getChildCategory().add(c5);
c2.setChildCategory(new HashSet());
c2.getChildCategory().add(c7);
c3.setChildCategory(new HashSet());
c3.getChildCategory().add(c8);
//third level
Category c6 = new Category();
c6.setText("c6");
c6.setId("c6");
c6.setUrl("http://www.163.com");
c6.setLeaf(true);
// c6.setParentCategory(c5);
//add third level
c5.setChildCategory(new HashSet());
c5.getChildCategory().add(c6);
}
//查找ID值对应的父节点
public Category qryParentCategory(String id){
Category parentCategory = null;
if(c.getId().equals(id)){
return null;
}else{
return findParentCategory(c,id);
}
}
//查找本身节点
public Category qryCategory(String id){
Category category = null;
if(c.getId().equals(id)){
return c;
}else{
return findCategoryById(c,id);
}
}
//查找子节点
public Set qryChildCategory(String id){
//查找节点
Category c = qryCategory(id);
//查找子节点
if(c != null && c.getChildCategory() != null){
return c.getChildCategory();
}
return null;
}
private Category findParentCategory(Category category,String id){
Category parentCategory = null;
if(category.getId().equals(id)){
parentCategory = category.getParentCategory();
}else if(category.getChildCategory() != null){
for(Iterator iter = category.getChildCategory().iterator();iter.hasNext();){
Category c = (Category)iter.next();
Category tmpC = findParentCategory(c,id);
if(tmpC != null){
parentCategory = tmpC;
break;
}
}
}
return parentCategory;
}
private Category findCategoryById(Category category,String id){
Category curCategory = null;
if(category.getId().equals(id)){
return category;
}else{
if(category.getChildCategory() != null){
for(Iterator iter = category.getChildCategory().iterator();iter.hasNext();){
Category tmpCategory = (Category)iter.next();
curCategory = findCategoryById(tmpCategory,id);
if(curCategory != null){
break;
}
}
}
}
return curCategory;
}
//
// public Set qryChildrenCategory(String id){
//
// }
public static void main(String[] args){
CategoryService cs = new CategoryService();
Set s = cs.qryChildCategory("c");
System.out.println(s);
}
}
分享到:
相关推荐
NULL 博文链接:https://8366.iteye.com/blog/544437
本软件实现了一个机构管理的小例子,可以点击左边树节点在右边的Grid中显示该节点的下属机构,并提供增删查改功能,主要包括JS文件和生成动态树所需要的JSON格式的数据的JAVA和jsp文件,商业逻辑请自己负责完成
在ExtJS 3中,实现异步下拉树涉及到几个关键概念和技术。 首先,理解“异步”意味着数据不是一次性加载完毕,而是按需加载。在下拉树中,当用户展开树节点时,只加载该节点及其子节点的数据,这减少了初始页面加载...
标题中的"ext 下拉树 ext2"指的是使用Ext JS库构建的一个特定版本的下拉树组件,其中"ext2"可能表示使用的是Ext JS的2.x版本。Ext JS是一个强大的JavaScript框架,主要用于构建富客户端Web应用程序,它提供了一系列...
在给定的压缩包文件中,包含了许多关于ExtJs中目录树和异步树的示例,这些示例可以帮助开发者深入理解和运用这一功能。以下是对这些知识点的详细解释: 1. **ExtJs目录树(Tree)**: ExtJs的树组件(Tree)允许...
2. **Proxy**: 树结构的异步加载通常使用`AjaxProxy`或`JsonPProxy`,根据服务器端支持的协议选择。配置包括URL、方法(GET或POST)、以及读取(`read`)操作的相关参数。 3. **NodeInterface**: 每个树节点都需要...
在Ext JS中,异步加载是一种常见的数据处理方式,尤其在构建动态的用户界面时非常有用。本篇文章主要探讨了如何在异步加载的场景下,实现树形控件(TreePanel)中节点的动态添加、删除以及ComboBox选择项的修改。 ...
- 动态加载:使用`loader`配置项,可以在需要时异步加载子节点。 - 拖放操作:通过`ddGroup`和`enableDragDrop`配置项,可以启用拖放功能,实现节点的移动和排序。 - 节点监听:可以监听节点的各种事件,如`...
6. **AJAX通信**:EXT通过AJAX与服务器进行异步通信,使用HTTP GET或POST请求来获取或提交数据。在EXT TreeGrid中,分页请求通常是通过Store的load方法触发的。 7. **部署与运行**:将开发完成的EXT应用程序(包括...
在EXT中,实现树形菜单主要依赖于`Ext.tree.Panel`组件,这个组件用于展示层次结构的数据。 1. **树形菜单基础** 树形菜单是一种具有层级结构的界面元素,通常用于表示文件系统、组织结构或导航菜单。在EXT中,`...
本文详细介绍了如何使用ExtJS中的`Ext.ux.tree.TreeGrid`组件实现异步加载功能,包括前端配置和后端数据处理两个方面。通过这种方式可以有效提升用户体验,同时减轻服务器的压力。在实际开发过程中,还需要根据具体...
通过这样的方式,ZTree和DWR的结合使用,不仅提升了用户体验,减少了不必要的网络传输,还使得后台数据的更新与前台展示无缝对接,实现了高效、流畅的异步加载树形菜单。在实际项目中,这种技术组合广泛应用在权限...
EXT 分页与树形结构是EXT JavaScript框架中的两种核心特性,它们在开发高效、互动性强的Web应用程序时扮演着重要角色。EXT是一个强大的客户端JavaScript库,用于构建富互联网应用程序(RIA)。在这里,我们将深入...
在Ext Js 2中,实现异步树的关键是使用`TreeLoader`对象。这个对象负责与服务器进行通信,获取并解析JSON数据。JSON数据通常包含节点的ID、文本、子节点数组等信息。例如,一个简单的JSON节点数据可能如下所示: ``...
在这个解决方案中,我们使用了Ext框架来实现树形结构的加载。Ext是一个非常流行的JavaScript框架,提供了许多强大的控件和API,讓开发者可以轻松地构建复杂的Web应用程序。在这里,我们使用Ext的Tree控件来实现树形...
6. **加载与异步**:树组件可以设置为异步加载,通过配置loadFn或使用Ajax请求加载子节点数据,这样可以提高性能,特别是在处理大量数据时。 7. **监听事件**:EXT提供了丰富的事件系统,如checkchange、itemclick...
在给定的标题“Ext 两种树形菜单”中,我们可以推测这是一个关于使用Ext JS框架创建两种不同样式或功能的树形菜单的示例。Ext JS是一个强大的JavaScript库,专门用于构建富客户端应用,它提供了丰富的组件和API来...
总结,结合ExtJS和JSP,我们可以创建一个动态的、异步加载的树形视图,通过JSP在服务器端生成数据,然后在客户端使用ExtJS进行渲染和交互。这种方案在展示大量层次化数据时,既提供了良好的用户体验,又兼顾了性能。
【磁盘目录树(EXT-js)】是一种使用EXT-js库构建的前端应用,它主要用于在Web界面中展示计算机硬盘上的目录结构,使用户能够像在操作系统中那样浏览、选择和操作文件夹。EXT-js是一个强大的JavaScript组件库,提供...