这两天在研究ExtJS，对其有了深刻的认识。总结如下：
根据显示数据量，决定Ext树的类型。如果是大数据量，一般采用创建Ext.tree.AsyncTreeNode根节点的方式
(即每点击一个树节点后，动态的从后台读取数据。优点：加快显示速度) 。如果数据量小，一般采用Ext.tree.TreeNode
这样的根节点。
第一种代码如下：
<%@ page language="java" contentType="text/html; charset=GBK"
pageEncoding="GBK"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK">
<link rel="stylesheet" type="text/css" href="../extjs/resources/css/ext-all.css"/>
<script type="text/javascript" src="../extjs/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../extjs/ext-all.js"></script>
<title>树结构</title>
<script type="text/javascript">
Ext.onReady(function() {
var root = new Ext.tree.AsyncTreeNode({
id : "root",
text : "树的根"
});
var loader = new Ext.tree.TreeLoader({
url : '<%=request.getContextPath()%>/User_getNodeTree'
});
loader.on("beforeload", function(loader, node) {
alert("---"+node.id);
loader.baseParams.nodeId = node.id;
});
var tree = new Ext.tree.TreePanel({
renderTo : "tree",
root : root,
loader : loader,
width : 200,
height : 300
});
});
</script>
</head>
<body>
<!-- 要有一定高度Ext2.0,不然看不见 -->
<div id="tree" style="overflow:auto; height:100%;width:250px;border:5px solid #c3daf9;"></div>
</body>
</html>
实体描述：构造包括 id,text,cls,leaf,href属性的实体
后台返回数据：
每次点击一个树节点后，从后台读取该节点的子节点的信息。例如：
[{text:'用户',href:'test.jsp',leaf:true},
{text:'管理员',href:'##',leaf:true}]
第二种树：
页面：
<%@ page language="java" contentType="text/html; charset=GBK"
pageEncoding="GBK"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK">
<link rel="stylesheet" type="text/css" href="../extjs/resources/css/ext-all.css"/>
<script type="text/javascript" src="../extjs/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../extjs/ext-all.js"></script>
<title>树结构</title>
<script type="text/javascript">
Ext.onReady(function() {
var treePanel=new Ext.tree.TreePanel({
renderTo : "tree",
useArrows:true,
autoScroll:true,
animate:true,
enableDD:true,
//是否显示跟节点
rootVisible:false,
frame: true,
containerScroll: true
});
var root=new Ext.tree.AsyncTreeNode({
id:'4',
text:'root',
leaf:false,
loader:new Ext.tree.TreeLoader({dataUrl:'/User_getNodeTree'})});
treePanel.setRootNode(root);
treePanel.getRootNode().expand(true);
});
</script>
</head>
<body>
<!-- 要有一定高度Ext2.0,不然看不见 -->
<div id="tree" style="overflow:auto; height:100%;width:250px;border:5px solid #c3daf9;"></div>
</body>
</html>
实体类：
package com.order.entity;
import java.util.List;
public class TreeModule{
/*
* 此bean用于构建树向其中注入有关的信息，将SysModule中的信息拷贝到JsonTreeModule中
*/
private String id; //ID
private String text; //节点显示
private String cls; //图标
private boolean leaf; //是否叶子
private String href; //链接
private String hrefTarget; //链接指向
private boolean expandable; //是否展开
private String description; //描述信息
private List<TreeModule> children;
public String getId() {
return id;
}
public void setId(String id) {
this.id = id;
}
public String getText() {
return text;
}
public void setText(String text) {
this.text = text;
}
public String getCls() {
return cls;
}
public void setCls(String cls) {
this.cls = cls;
}
public boolean isLeaf() {
return leaf;
}
public void setLeaf(boolean leaf) {
this.leaf = leaf;
}
public String getHref() {
return href;
}
public void setHref(String href) {
this.href = href;
}
public String getHrefTarget() {
return hrefTarget;
}
public void setHrefTarget(String hrefTarget) {
this.hrefTarget = hrefTarget;
}
public boolean isExpandable() {
return expandable;
}
public void setExpandable(boolean expandable) {
this.expandable = expandable;
}
public String getDescription() {
return description;
}
public void setDescription(String description) {
this.description = description;
}
public List<TreeModule> getChildren() {
return children;
}
public void setChildren(List<TreeModule> children) {
this.children = children;
}
}
Struts2：
/**
* 创建菜单树结构
* @return
*/
public String getNodeTree(){
PrintWriter out=null;
response.setContentType("text/html;charset=GBK");
try {
out=response.getWriter();
} catch (IOException e) {
e.printStackTrace();
}
User user=(User)session.getAttribute("user");
if(user!=null){
UserService uservice=new UserService();
String allprivs=user.getPrivs();
List<String> privsList=Arrays.asList(allprivs.trim().split(","));
List<MenuPanel> menulist=uservice.getAllNodes();
List<TreeModule> list=new ArrayList<TreeModule>();
for(MenuPanel mp:menulist){
if(mp.getParantNodeID()==0){
TreeModule treeNode=new TreeModule();
treeNode.setId(mp.getNodeId());
treeNode.setText(mp.getMenuName());
treeNode.setLeaf(mp.isLeaf());
treeNode.setHref(mp.getActionPath());
List<TreeModule> children=new ArrayList<TreeModule>();
for(MenuPanel menu:menulist){
if(menu.getParantNodeID().intValue()==mp.getId().intValue()
&&privsList.contains(menu.getNodeId().trim())){
TreeModule subtreeNode=new TreeModule();
subtreeNode.setId(menu.getNodeId());
subtreeNode.setText(menu.getMenuName());
subtreeNode.setLeaf(menu.isLeaf());
subtreeNode.setHref(menu.getActionPath());
children.add(subtreeNode);
}
}
if(children.size()>0){
treeNode.setChildren(children);
list.add(treeNode);
}
}
}
JSONArray obj=JSONArray.fromObject(list);
String res = obj.toString();
out.println(res);
}
return null;
}
有些地方参考网上的一些代码。
分享到：
相关推荐
1. **Extjs TreePanel**: TreePanel是Extjs中用于展示树形数据的组件，它允许你创建可交互的树结构。动态加载通常通过配置TreePanel的`rootVisible`、`loadMask`、`async`属性以及`loader`来实现。 2. **异步加载**...
1. `Ext.tree.TreePanel`：这是ExtJS中用于创建树形结构的主要组件。它具有丰富的配置项和事件，支持数据源绑定，能轻松实现动态加载。 2. 数据源：动态树的数据通常来自服务器，通过Ajax请求获取JSON格式的节点数据...
在 EasyUI 中，`tree` 组件用于创建树形结构。通过简单的 HTML 结构和 JavaScript 配置，我们可以轻松地实现动态加载、节点操作（如展开、折叠、添加、删除）以及自定义图标等功能。在描述中提到的程序，很可能是...
2. **创建树存储**（Ext.data.TreeStore）：这是树形数据的核心，负责管理和加载数据。我们需要配置`proxy`对象，通常使用`Ajax`或`JsonP`类型，以便从服务器获取数据。同时，设置`root`属性来指定树的根节点。动态...
动态树（Dynamic Tree）指的是能够根据用户交互或后台数据变化实时更新的树形结构。在本篇文章中，我们将深入探讨ExtJS中的动态树以及中文API的使用。 动态树的核心在于其数据绑定机制。在ExtJS中，树形控件通常与...
本项目将详细介绍如何使用ExtJS动态加载树结构，并通过JDBC连接SQL Server数据库获取数据，最终将数据转换为JSON格式以供树结构使用。 首先，让我们了解**ExtJS动态树**的基本概念。动态树（Dynamic Tree）指的是在...
在本文中，我们将深入探讨如何使用ExtJS框架来实现自定义树结构以及动态表头的功能。ExtJS是一款强大的JavaScript库，常用于构建富客户端应用程序，它提供了丰富的UI组件和强大的数据绑定机制。VS2015是Visual ...
总结来说，这个例子展示了如何使用ExtJS4和Java实现一个动态树结构。前端通过TreeStore从后端动态获取数据，当用户点击树节点时，会触发新的数据请求。后端根据请求参数返回JSON数据，更新树结构。这种动态加载的...
标题中的“EXTJS动态树支持checkbox全选”指的是EXTJS中树组件的一个特性，即在树形结构中添加复选框（checkbox）功能，并支持全选和全取消选中操作。这样的功能对于需要用户进行多项选择的场景非常有用，比如文件...
ExtJS 动态树结构与Struts框架结合，主要用于构建基于Web的动态树形界面，让用户能够以图形化的方式查看和操作层次结构的数据。在这一过程中，Struts作为MVC框架负责后端业务逻辑处理，而ExtJS则作为前端展示库，...
ExtJS4是一款强大的JavaScript框架，用于构建富...通过这样的方式，我们可以构建一个动态、高效的ExtJS4树结构，仅在需要时加载数据，提升用户体验。同时，这种方式也使得开发者能够更好地控制数据流，降低服务器压力。
在本文中，我们将探讨如何实现ExtJS动态树以及其中的节点拖拽功能。动态树是一种能够实时更新和修改的树形结构，允许用户添加、删除和移动节点。这种功能在各种应用场景中非常有用，如文件系统、组织结构或层级数据...
1. **创建树结构**：在ExtJS中，树的数据源通常是一个JSON对象或Store，其中包含了节点的信息，如ID、文本、子节点等。例如： ```javascript var treeStore = Ext.create('Ext.data.TreeStore', { root: { ...
在EXTJS中，我们通常使用`Ext.tree.Panel`或`Ext.widget('treepanel')`来创建树形结构，并结合`Ext.form.field.ComboBox`来构建下拉效果。下面将深入探讨实现这个功能的关键步骤和相关知识点： 1. **创建树形数据...
总结起来，"jsp+access+extjs动态树实例"是一个综合性的Web开发案例，它结合了服务器端的JSP处理、数据库操作以及客户端的动态展示技术，展示了如何利用现有工具和技术实现一个功能丰富的交互式动态树视图。...
在ExtJS中，"下拉多选树"（Combobox Tree）是一种结合了下拉框和树形结构的组件，它允许用户在下拉菜单中选择多个树节点，提供了一种高效且直观的用户交互方式。 1. **下拉树组件**：在ExtJS中，树形组件...
1. **EXTJS动态树**： EXTJS的动态树（TreePanel）组件允许开发者创建可交互的树形结构，这些结构可以动态地加载数据。树节点可以包含子节点，可以展开或折叠，支持拖放操作，非常适合用来展示层次化的信息，如目录...
总的来说，通过理解并熟练运用这些知识点，开发者可以创建出交互性强、性能优秀的动态树视图，适用于各种需要展现层级结构数据的场景，如组织架构、文件系统、菜单导航等。同时，与Ajax的结合使用，使得这种视图在...
在EXTJS中实现动态树，主要是通过EXTJS的TreePanel组件来完成，下面将详细介绍EXTJS动态树的实现过程及其相关知识点。 1. TreePanel组件： TreePanel是EXTJS中用来展示树形结构数据的组件。它包含节点（Node）、根...
5. **实时搜索**：通过监听TreeStore的filter方法，可以在用户输入时动态更新树形结构。例如，可以设置一个文本框，监听其change事件，根据输入值调用store.filter方法，传入过滤规则。 6. **自定义过滤器**：EXTJS...