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