Extjs通过structs2生成树结构

最新推荐文章于 2022-11-21 16:12:48 发布

玉&心

最新推荐文章于 2022-11-21 16:12:48 发布

阅读量106

点赞数

本文链接：https://blog.csdn.net/XinhuaShuDiao/article/details/84713791

版权

JAVA 同时被 3 个专栏收录

60 篇文章 0 订阅

订阅专栏

EXTJS

7 篇文章 0 订阅

订阅专栏

STRUCT2

4 篇文章 0 订阅

订阅专栏

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>
效果如图所示:[img]http://a.hiphotos.bdimg.com/album/pic/item/38dbb6fd5266d016190367bc962bd40735fa350f.jpg[/img]

玉&心

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Extjs通过structs2生成树结构

Extjs为我们提供了强大的树的生成方式，我们不必通过原始的js去生成树形结构。在这里我做了一个简单的树结构生成。代码如下,同时在后台使用了fastjson-1.1.15.jar的jar包生成json对象，Extjs使用的是3.2版本。 Java文件代码：Bo类： import java.util.List;public ...
复制链接

扫一扫