Extjs 动态树异步树

来源：互联网发布：乐乎lofter包含帅哥编辑：程序博客网时间：2024/06/05 07:08

先说下本项目使用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"/>
<package name="json" extends="json-default">
<action name="tree" class="com.tree.action.TreeAction" method="treeList">
             <result type="json">    
             <param name="root">    
                   treeNodeList     
                </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="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 动态树 异步树

Extjs 动态树异步树