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生成树结构

 

 

你可能感兴趣的:(struct)