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