先说下本项目使用struts2+hibernate+Extjs3.*
将整个项目搭建起来后,我的项目整体架构如下图片
其中一些配置很重要,只讲下struts.xml其他的没多大问题
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE struts PUBLIC
"-//Apache Software Foundation//DTD Struts Configuration 2.0//EN"
"http://struts.apache.org/dtds/struts-2.0.dtd">
<struts>
<include file="struts-default.xml"/><!--struts2原来就需要的xml文件 -->
<package name="json" extends="json-default"><!--使用Extjs时需要配置 -->
<action name="tree" class="com.tree.action.TreeAction" method="treeList">
<result type="json"><!--返回的数据类型为json格式 -->
<param name="root"><!--这个与页面的js root相对应不需要改动 -->
treeNodeList<!--树节点返回页面的List,与action里的List名字相同 -->
</param>
</result>
</action>
</package>
</struts>
环境搭建好了之后开始重要部分了。
页面代码:
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>My JSP 'index.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
<link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all.css">
<script type="text/javascript" src="ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext/ext-all.js"></script>
<script type="text/javascript" src="ext/ext-lang-zh_CN.js"></script>
<script type="text/javascript">
Ext.onReady(function(){
var root = new Ext.tree.AsyncTreeNode( {
text : '根结点',
draggable : false,
id : '0'
});
var treeloader = new Ext.tree.TreeLoader({
dataUrl : 'tree.action'
});
var tree = new Ext.tree.TreePanel( {
rootVisible:true,
layout:'fit',
autoHeight:true,
width:100,
margins: '5 5 4 5',
autoScroll: true,
renderTo: 'tree', // Using this config, a call to render() is not required (在html中存在一个 id 为 tree 的结点)
animate: true,
enableDD: false,
title: '异步树',
root: root, // You must define the root variable before when you set the root config
loader:treeloader});
treeloader.on("beforeload", function(treeLoader, node) {
treeLoader.baseParams.id = node.id; //node.id为树节点的id,传给后台的参数
}, this);
});
</script>
</head>
<body>
<div id="tree"></div>
</body>
</html>
后台代码:Action
package com.tree.action;
import java.util.*;
import com.entity.Tree;
import com.opensymphony.xwork2.ActionSupport;
import com.tree.TreeNode;
import com.tree.dao.TreeDao;
public class TreeAction extends ActionSupport{
private List<TreeNode> treeNodeList;//返回到页面的List
private String id;//前台传过来的参数
public String treeList(){
List<Tree> treeList=TreeDao.queryList(id);
treeNodeList=new ArrayList<TreeNode>();
for(Tree tree:treeList){
TreeNode tn=new TreeNode();
tn.setId(Integer.toString(tree.getTreeId()));
tn.setHref("http://www.baidu.com?id="+tree.getTreeId());//设置链接和所需要传的参数
tn.setHrefTarget("rightFrame");
if(tree.getTreeParentId().equals("0")){
tn.setLeaf(false);
}else{
tn.setLeaf(true);
}
tn.setText(tree.getTreeName());
treeNodeList.add(tn);
}
return SUCCESS;
}
public List<TreeNode> getTreeNodeList() {
return treeNodeList;
}
public void setTreeNodeList(List<TreeNode> treeNodeList) {
this.treeNodeList = treeNodeList;
}
public String getId() {
return id;
}
public void setId(String id) {
this.id = id;
}
}
用到的类:Tree
package com.entity;
/**
* Tree entity. @author MyEclipse Persistence Tools
*/
public class Tree implements java.io.Serializable {
// Fields
private Integer treeId;
private Integer treeNumber;
private String treeName;
private Integer treeParentId;
// Constructors
/** default constructor */
public Tree() {
}
/** full constructor */
public Tree(Integer treeNumber, String treeName, Integer treeParentId) {
this.treeNumber = treeNumber;
this.treeName = treeName;
this.treeParentId = treeParentId;
}
// Property accessors
public Integer getTreeId() {
return this.treeId;
}
public void setTreeId(Integer treeId) {
this.treeId = treeId;
}
public Integer getTreeNumber() {
return this.treeNumber;
}
public void setTreeNumber(Integer treeNumber) {
this.treeNumber = treeNumber;
}
public String getTreeName() {
return this.treeName;
}
public void setTreeName(String treeName) {
this.treeName = treeName;
}
public Integer getTreeParentId() {
return this.treeParentId;
}
public void setTreeParentId(Integer treeParentId) {
this.treeParentId = treeParentId;
}
}
TreeNode
package com.tree;
/**
* 树节点,暂时只列举了这些树节点属性
* @author huaye
*
*/
public class TreeNode {
private String text; //树节点显示的文本
private boolean isLeaf; //是否设置为叶子节点
private String hrefTarget;//在那个框架里面显示页面,写的是框架名
private String id; //节点id
private String href; //树节点的超链接,即url
public String getText() {
return text;
}
public void setText(String text) {
this.text = text;
}
public boolean isLeaf() {
return isLeaf;
}
public void setLeaf(boolean isLeaf) {
this.isLeaf = isLeaf;
}
public String getHrefTarget() {
return hrefTarget;
}
public void setHrefTarget(String hrefTarget) {
this.hrefTarget = hrefTarget;
}
public String getId() {
return id;
}
public void setId(String id) {
this.id = id;
}
public String getHref() {
return href;
}
public void setHref(String href) {
this.href = href;
}
}
提下很重要的两个jar包,jsonplugin-0.34.jar Extjs与struts2所需要的
json-lib-2.4-jdk15.jar 将List转成JSON所必须的
分享到:
相关推荐
本文将深入探讨如何使用ExtJS构建动态异步加载的树形结构,结合AJAX技术实现JSON数据的高效传输。 首先,我们要理解什么是动态异步加载。在传统的网页开发中,如果一次性加载所有数据,可能会导致页面加载速度慢,...
在本篇文章中,我们将深入探讨ExtJS中的动态树以及中文API的使用。 动态树的核心在于其数据绑定机制。在ExtJS中,树形控件通常与数据源(如Store)绑定,当数据源发生变化时,树会自动更新。你可以通过Ajax请求获取...
ExtJS4是一款强大的JavaScript框架,用于构建富...通过这样的方式,我们可以构建一个动态、高效的ExtJS4树结构,仅在需要时加载数据,提升用户体验。同时,这种方式也使得开发者能够更好地控制数据流,降低服务器压力。
一、ExtJS 动态树基础 1. `Ext.tree.TreePanel`:这是ExtJS中用于创建树形结构的主要组件。它具有丰富的配置项和事件,支持数据源绑定,能轻松实现动态加载。 2. 数据源:动态树的数据通常来自服务器,通过Ajax请求...
总结来说,EXTJS动态树支持checkbox全选是一个结合了EXTJS TreePanel组件、数据模型、事件处理和异步加载技术的功能实现,旨在提供用户友好的多选操作。通过这个功能,开发者可以构建出更加交互性强、功能丰富的Web...
在ExtJS 3中,实现异步下拉树涉及到几个关键概念和技术。 首先,理解“异步”意味着数据不是一次性加载完毕,而是按需加载。在下拉树中,当用户展开树节点时,只加载该节点及其子节点的数据,这减少了初始页面加载...
说明:本例主要实现在树节点数据过多的情况下对数据进行异步请求,并且在请求数据返回前台的同时实现级联选择。使用ExtJs版本为4.1.1a,在struts2下测试通过。例子仅供提供思路,简单易懂,不负责代码优化,哈哈!
ExtJS 动态树结构与Struts框架结合,主要用于构建基于Web的动态树形界面,让用户能够以图形化的方式查看和操作层次结构的数据。在这一过程中,Struts作为MVC框架负责后端业务逻辑处理,而ExtJS则作为前端展示库,...
动态树(Dynamic Tree)指的是在用户操作或特定事件触发时,通过异步请求加载树节点的数据。这种方式可以提高页面的加载速度,减少初次加载时的数据量。在ExtJS中,我们可以利用TreeStore和AjaxProxy来实现动态加载...
2. **异步加载**: 在动态加载树中,数据通常不是一次性全部加载,而是通过异步请求获取。Extjs的TreeLoader或TreeStore负责处理这些请求,当用户展开节点时,会发送Ajax请求到服务器获取子节点数据。 3. **数据模型...
在给定的压缩包文件中,包含了许多关于ExtJs中目录树和异步树的示例,这些示例可以帮助开发者深入理解和运用这一功能。以下是对这些知识点的详细解释: 1. **ExtJs目录树(Tree)**: ExtJs的树组件(Tree)允许...
extjs异步树,多选树,json数据机构,集成spring,struts例子,extjs异步树,多选树,json数据机构,集成spring,struts例子,extjs异步树,多选树,json数据机构,集成spring,struts例子,extjs异步树,多选树,json...
在家研究了一下extjs异步树,-每个节点都异步加载-前后台代码都有-附整个工程-运行通过-前台代码请看doctree.js,后台代码请看TreeService.java,运行环境:Myeclipse6.5+tomcat7.0.27
动态树是一种可以实时加载或异步加载节点数据的树形结构,适用于显示大量层次化的信息。 在EXTJS中,动态树的实现主要依赖于`Ext.tree.Panel`类和`Ext.data.TreeStore`类。`TreeStore`负责管理树的数据源,而`...
EXTJS动态树是一种基于JavaScript的UI组件,用于在网页中构建可交互的树形结构数据展示。EXTJS是一个强大的前端框架,提供了丰富的组件库,包括表格、表单、树、图表等多种元素,使得开发者能够创建出功能丰富且用户...
4. **异步加载**:动态树通常采用异步加载方式,即在用户展开节点时才向服务器请求子节点数据。这可以通过设置`TreeStore`的`proxy`,通常是`Ext.data.proxy.Ajax`,并定义`url`和`params`来实现。服务器返回的数据...
在给定的标题和描述中,主要涉及了ExtJS中的动态树(tree)功能以及与AJAX的结合使用。下面将详细介绍这些知识点。 **动态树(Dynamic Tree)** 动态树是ExtJS中的一种控件,用于展示层次结构的数据。它可以实时地...
7. **异步加载**:对于拥有大量子节点的树,EXTJS支持延迟加载或按需加载。只有当用户展开父节点时,才会请求并加载其子节点,这样可以显著提高性能。 8. **搜索性能优化**:在处理大量数据时,可以考虑对树进行...
总结来说,"Extjs 无限树菜单 后台拼接json"涉及到的技术点包括:ExtJS的树形组件使用、后台动态生成JSON、无限滚动加载策略、以及前端和后端的异步通信。通过这样的方式,我们可以构建出动态、可扩展且高效的树形...
ExtJS下拉树是一种在Web应用中常用的交互组件,它结合了下拉框和树形结构的优点,使得用户可以在一个紧凑的空间内选择嵌套层次的数据。这种组件在数据层级较多,需要用户进行逐级选择或者查看层级关系时非常实用。在...