Extjs通过structs2生成树结构

Extjs为我们提供了强大的树的生成方式，我们不必通过原始的js去生成树形结构。在这里我做了一个简单的树结构生成。代码如下,同时在后台使用了fastjson-1.1.15.jar的jar包生成json对象，Extjs使用的是3.2版本。

          Java文件代码：

Bo类：

import java.util.List;

public class TreeBo {
private int id;//节点id
private String text;//节点显示名称
private String cls;//节点图标
private Boolean leaf;//是否叶子节点
private List<TreeBo> children;//下级节点

.......//省略了相应的getter/setter方法

}

action类：

import java.io.IOException;
import java.io.PrintWriter;
import java.util.ArrayList;
import java.util.List;

import javax.servlet.http.HttpServletResponse;

import org.apache.struts2.ServletActionContext;

import com.alibaba.fastjson.JSONObject;
import com.test.bo.TreeBo;

public class FunctionListAction {

private List<TreeBo> treeList;

public void testTree(){
treeList = new ArrayList<TreeBo>();
TreeBo cdAllMilitary = new TreeBo();
cdAllMilitary.setText("成都军区");
cdAllMilitary.setCls("folder");
cdAllMilitary.setLeaf(false);
cdAllMilitary.setId(1);
treeList.add(cdAllMilitary);

List<TreeBo> cdMilitary = new ArrayList<TreeBo>();
cdAllMilitary.setChildren(cdMilitary);
TreeBo cq = new TreeBo();
cq.setText("重庆军区");
cq.setCls("folder");
cq.setLeaf(true);
cq.setId(11);
cdMilitary.add(cq);
TreeBo km = new TreeBo();
km.setText("昆明军区");
km.setCls("folder");
km.setLeaf(true);
km.setId(12);
cdMilitary.add(km);

TreeBo bjAllMilitary = new TreeBo();
bjAllMilitary.setText("北京军区");
bjAllMilitary.setCls("folder");
bjAllMilitary.setLeaf(false);
bjAllMilitary.setId(2);
treeList.add(bjAllMilitary);

List<TreeBo> bjMilitary = new ArrayList<TreeBo>();
bjAllMilitary.setChildren(bjMilitary);
TreeBo bj = new TreeBo();
bj.setText("北京军区");
bj.setCls("folder");
bj.setLeaf(true);
bj.setId(21);
bjMilitary.add(bj);

TreeBo tj = new TreeBo();
tj.setText("天津军区");
tj.setCls("folder");
tj.setLeaf(true);
tj.setId(22);
bjMilitary.add(tj);

HttpServletResponse response = ServletActionContext.getResponse();
response.setCharacterEncoding("utf-8");
try {
   PrintWriter writer = response.getWriter();
   writer.print(JSONObject.toJSON(treeList).toString());
} catch (IOException e) {
   e.printStackTrace();
}
}

JSP文件：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
     <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="./js/tree.js"></script>
     <link rel="stylesheet" type="text/css" href="./css/menu.css">

</head>
<body>
    <div id="container">
     <div id="tree"></div>
</div>
</body>
</html>

css文件:主要是menu.css

#container {
    width:650px;
    height:330px;
    border:3px solid #c3daf9;

}

js文件：主要是tree.js

Ext.onReady(function(){

var tree = new Ext.tree.TreePanel({
     el:'tree',
     autoScroll:true,
     animate:true,
     enableDD:true,
     containerScroll:true,
     loader:new Ext.tree.TreeLoader({dataUrl:'function_testTree.action'})
});
var root = new Ext.tree.AsyncTreeNode({
     text:'中国军区',
     draggable:false,
     id:'testTree'
});
tree.setRootNode(root);
tree.render();
root.expand();
});

struct配置文件:

<?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>
<package name="struts2" namespace="/" extends="struts-default">

<action name="function_*" class="com.test.action.FunctionListAction" method="{1}">

</action>

</package>

</struts>
效果如图所示:

Extjs通过structs2生成树结构

猜你喜欢