Extjs通过structs2生成树结构

2023-08-12 11:18:34

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>/

效果如图所示:

码农公寓

相关文章