Extjs 动态树 异步树
先说下本项目使用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所必须的