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>
效果如图所示:
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>
效果如图所示: