Extjs的jsp代码：
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>TEST</title>
<!-- 在根目录下建立包里放js要加../ 来引用extjs的js和css-->
<link rel="stylesheet" type="text/css" href="../Ext4.2/resources/css/ext-all-neptune.css">
<!-- 引入example.css，examples.js可使用Ext.example.msg('<font color="#ff9900">警告</font>',"不能重复作答！");输出-->
<link rel="stylesheet" type="text/css" href="../ExtJs/examples/shared/example.css" />
<link rel="stylesheet" type="text/css" href="../icon.css">
<script type="text/javascript" src="../Ext4.2/bootstrap.js"></script>
<script type="text/javascript" src="../ExtJs/examples/shared/examples.js"></script>
<script type="text/javascript" src="../Ext4.2/locale/ext-lang-zh_CN.js"></script>
<script type="text/javascript" src="tree.js"></script>
</head>
<body>
<div id="tree"></div>
</body>
</html>
ext 的js代码：
Ext.onReady(function(){
var treestore = Ext.create('Ext.data.TreeStore', {
fields: [
{name: 'id', type: 'string'},
{name: 'node', type: 'string'},//为节点名称
{name: 'content', type: 'string'},
{name: 'leaf', type: 'bool'} //这个一定要， 不然不能区分 是否是叶子
]，
root:{
node:'广州',//根的名称
id:'-100',//根的id
expanded:false,
leaf: false
}
});
treepanel = Ext.create('Ext.tree.Panel',{
id: 'treepanel',
region: 'center',
flex:3,
renderTo:'tree',//对应jsp的<div id="tree"></div>
title: '文档结构',
store: treestore,
rootVisible: true,// 显示根节点，false 不显示
singleExpand: false,
frame: true,
tbar: ['-','-',
{
text:'全部折叠',
iconCls:'icon-collapse-all',
handler:function(){
treepanel.collapseAll();
}
}
],
listeners:{
'beforeitemexpand':function(node,optd)// 节点展开监听
{
var ids=node.get('id');//获取节点ID
treestore.setProxy({
type: 'ajax',
url:'getTreeData.action?ids='+ids,//传父ID到后台
reader:{
type: 'json'
// root:'children'//不写默认children
}
});
}
},
columns: [
{
xtype: 'treecolumn',//树列
dataIndex: 'node',//节点名字
text: '节点名字',
flex: 1//比例显示
},
{
text : '内容预览',
xtype : 'gridcolumn',//表列
dataIndex: 'content',//显示内容对应 store的fields里的content
flex: 1
}
]
});
});
建立一个树的实体：
package excelTree;
import java.util.List;
public class TreeModel {
public String id;
public String node;
public String content;
public boolean leaf;
public List<TreeModel>children;//一次性加载用，异步不用。json 数据List用[]包住，list内 元素用{}。
public String getId() {
return id;
}
public void setId(String id) {
this.id = id;
}
public String getNode() {
return node;
}
public void setNode(String node) {
this.node = node;
}
public String getContent() {
return content;
}
public void setContent(String content) {
this.content = content;
}
public boolean isLeaf() {
return leaf;
}
public void setLeaf(boolean leaf) {
this.leaf = leaf;
}
public List<TreeModel> getChildren() {
return children;
}
public void setChildren(List<TreeModel> children) {
this.children = children;
}
}
获取树的data的java方法
package excelTree;
import java.util.ArrayList;
import java.util.List;
import javax.naming.NamingException;
import com.opensymphony.xwork2.ActionSupport;
import common.tools;
import excel.Excel;
import excel.ExcelBeanRemote;
public class TreeData extends ActionSupport {
/**
*
*/
private static final long serialVersionUID = 1L;
final String pjName = new tools().moduleName();
public List<TreeModel>children;//记得get和set不然获取不到数据，js页面root没设置， 默 认children
public String ids;//get和set得到 前台传来的 父ID
public List<TreeModel> getChildren() {
return children;
}
public void setChildren(List<TreeModel> children) {
this.children = children;
}
public String getIds() {
return ids;
}
public void setIds(String ids) {
this.ids = ids;
}
public ExcelBeanRemote remote(){
ExcelBeanRemote remote = null;
try {
remote = (ExcelBeanRemote) new tools().getContext().lookup(pjName+"ExcelBean!excel.ExcelBeanRemote");
} catch (NamingException e) {
e.printStackTrace();
}
return remote;
}
public String GetTreenode()
{
children=new ArrayList<TreeModel>();//实例化 List,这步记得加
List<Excel>excel=new ArrayList<Excel>();
excel=remote().getExcelParts(Integer.parseInt(ids));//根据父ID到 数据库获取其 下的节点
for(int i=0;i<excel.size();i++)//放进List 的-children获取数据
{
TreeModel ok=new TreeModel();
ok.setId(excel.get(i).getTestid().toString());
ok.setContent(excel.get(i).getNaturetext());
ok.setNode(excel.get(i).getNaturename());
ok.setLeaf(Boolean.parseBoolean(excel.get(i).getSheetname()));//如果 String 参数不是 null 且在忽略大小写时等于"true"，则返回的 boolean 表示 true 值。
children.add(ok);
}
return SUCCESS;//返回数据children
}
}
structs.xml配置
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE struts PUBLIC
"-//Apache Software Foundation//DTD Struts Configuration 2.3//EN"
"http://struts.apache.org/dtds/struts-2.3.dtd">
<struts>
<constant name="struts.multipart.maxSize" value="20971520" ></constant>
<package name="extjs4" extends="json-default" namespace="/">
<!--tree Test，返回类型json-->
<action name = "getTreeData" class ="excelTree.TreeData" method="GetTreenode">
<result type="json"></result>
</action>
</package>
</struts>
相关推荐
异步加载树型是 ExtJS Tree 的一个重要特性，允许只在需要时动态加载子节点，从而提高页面的加载速度和用户体验。 异步加载通常通过 AJAX 请求实现，只有当用户展开一个节点时，才会向服务器请求该节点的子节点数据...
本文将深入探讨如何使用ExtJS构建动态异步加载的树形结构，结合AJAX技术实现JSON数据的高效传输。 首先，我们要理解什么是动态异步加载。在传统的网页开发中，如果一次性加载所有数据，可能会导致页面加载速度慢，...
在ExtJS4中实现树结构的异步加载，主要涉及以下几个关键概念： 1. **TreeStore**: TreeStore是树结构的数据源，它负责管理与服务器之间的数据通信。对于异步加载，我们需要配置TreeStore，设置`autoLoad`为`false`...
对于大数据量的树，可以使用异步加载（lazy loading）技术，只加载当前可视区域的节点，提高性能。 11. **与服务器端通信**： 当用户完成选择后，通常需要将选中的节点ID发送到服务器端进行保存或处理。这可以...
动态加载本地数据到`Ext.Panel`通常涉及到异步请求，使用`Ajax`或`Store`的`load`方法，通过URL获取JSON或XML格式的数据，并将其渲染到面板内。 例如： ```javascript var panel = Ext.create('Ext.Panel', { ...
本文详细介绍了如何使用ExtJS中的`Ext.ux.tree.TreeGrid`组件实现异步加载功能，包括前端配置和后端数据处理两个方面。通过这种方式可以有效提升用户体验，同时减轻服务器的压力。在实际开发过程中，还需要根据具体...
7. **配置项**: 在配置Tree和TreeStore时，还需要注意一些与动态加载相关的配置项，如`rootVisible`（是否显示根节点）、`loadMask`（加载时是否显示遮罩）、`async`（启用异步加载）等。 通过以上介绍，我们可以...
4. **TreeLoader**：负责实际的异步加载操作，它会触发Ajax请求获取子节点。可以配置`nodeParam`属性，告诉服务器请求的是哪个节点的子节点。 5. **UI 自定义**：因为下拉树需要与下拉框结合，所以可能需要自定义`...
2. **异步加载**: 在动态加载树中，数据通常不是一次性全部加载，而是通过异步请求获取。Extjs的TreeLoader或TreeStore负责处理这些请求，当用户展开节点时，会发送Ajax请求到服务器获取子节点数据。 3. **数据模型...
Tree组件支持动态加载数据，这意味着在树展开时，可以异步地从服务器获取子节点数据，而不是一开始就加载所有数据，这在处理大量数据时非常有用。动态加载可以通过在`Ext.data.TreeStore`中设置`proxy`和`autoLoad`...
这个"extjs-tree.zip"文件包含了使用Java编写的ExtJS异步树形控件的示例代码，旨在帮助开发者快速理解和应用这一功能。ExtJS是Sencha公司开发的一个前端框架，广泛应用于构建富互联网应用程序（RIA）。 在ExtJS中，...
而异步加载则是在用户滚动或展开节点时才请求并加载相关的子节点，显著减少了初始加载时间，提升了用户体验。 在Ext Js 2中，实现异步树的关键是使用`TreeLoader`对象。这个对象负责与服务器进行通信，获取并解析...
ExtJS AJAX Tree是一种基于JavaScript的动态树形结构，它利用AJAX技术来异步加载节点数据，无需在服务器端生成完整的树结构。这种方式可以显著提高页面加载速度，尤其是在处理大量数据时。ExtJS是一个功能丰富的...
如果需要异步加载，还需设置`loadMask`（加载遮罩）和`async`（异步加载标志）。 4. 自定义节点模板：通过`viewConfig`配置项，可以自定义节点的样式和行为，例如使用`tpl`和`indent`来控制节点的显示。 5. 绑定...
- **异步加载**：通过`Ext.tree.TreeLoader`实现数据的异步加载，其中`dataUrl`指定了获取数据的URL路径。 - **根节点配置**：通过`root`属性指定树的根节点，该节点可配置自己的`text`、`iconCls`和`id`等属性。 #...
动态加载通常通过配置`rootVisible: false`、`loadMask: true`以及设置`treeStore`的`proxy`和`autoload`属性来实现，同时配合使用`treeStore.load()`方法来异步加载数据。 接下来是增删改查（CRUD）操作。在ExtJS ...
- `Ext.data.TreeStore`用于管理树节点数据，它可以连接到服务器进行异步加载。 3. **节点操作**： - `expand()`: 展开节点。 - `collapse()`: 折叠节点。 - `select()`: 选择节点。 - `unselect()`: 取消选择...
在3.2.0版本中，TreePanel支持异步加载，可以通过Ajax请求获取节点数据，实现动态加载，提高页面性能。 2. **ASP.NET**：这是一种微软提供的服务器端编程平台，用于构建动态Web应用程序。在这个项目中，ASP.NET可能...
它支持拖放操作、异步加载以及多种节点类型和样式。 2. **JSON (JavaScript Object Notation)**: JSON 是一种轻量级的数据交换格式，易于人阅读和编写，同时也易于机器解析和生成。在本例中，服务器端的Struts2框架...
在ExtJS中，可以使用`Ext.data.proxy.WCF`作为数据代理，配置WCF的服务地址和方法，以异步方式加载树数据。 7. **自定义节点** 除了基本的文本和图标，节点还可以包含其他组件，如按钮、输入框等，以增强交互性。...