Extjs的jsp代码：
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>TEST</title>
<!-- 在根目录下建立包里放js要加../ 来引用extjs的js和css-->
<link rel="stylesheet" type="text/css" href="../Ext4.2/resources/css/ext-all-neptune.css">
<!-- 引入example.css，examples.js可使用Ext.example.msg('<font color="#ff9900">警告</font>',"不能重复作答！");输出-->
<link rel="stylesheet" type="text/css" href="../ExtJs/examples/shared/example.css" />
<link rel="stylesheet" type="text/css" href="../icon.css">
<script type="text/javascript" src="../Ext4.2/bootstrap.js"></script>
<script type="text/javascript" src="../ExtJs/examples/shared/examples.js"></script>
<script type="text/javascript" src="../Ext4.2/locale/ext-lang-zh_CN.js"></script>
<script type="text/javascript" src="tree.js"></script>
</head>
<body>
<div id="tree"></div>
</body>
</html>
ext 的js代码：
Ext.onReady(function(){
var treestore = Ext.create('Ext.data.TreeStore', {
fields: [
{name: 'id', type: 'string'},
{name: 'node', type: 'string'},//为节点名称
{name: 'content', type: 'string'},
{name: 'leaf', type: 'bool'} //这个一定要， 不然不能区分 是否是叶子
]，
root:{
node:'广州',//根的名称
id:'-100',//根的id
expanded:false,
leaf: false
}
});
treepanel = Ext.create('Ext.tree.Panel',{
id: 'treepanel',
region: 'center',
flex:3,
renderTo:'tree',//对应jsp的<div id="tree"></div>
title: '文档结构',
store: treestore,
rootVisible: true,// 显示根节点，false 不显示
singleExpand: false,
frame: true,
tbar: ['-','-',
{
text:'全部折叠',
iconCls:'icon-collapse-all',
handler:function(){
treepanel.collapseAll();
}
}
],
listeners:{
'beforeitemexpand':function(node,optd)// 节点展开监听
{
var ids=node.get('id');//获取节点ID
treestore.setProxy({
type: 'ajax',
url:'getTreeData.action?ids='+ids,//传父ID到后台
reader:{
type: 'json'
// root:'children'//不写默认children
}
});
}
},
columns: [
{
xtype: 'treecolumn',//树列
dataIndex: 'node',//节点名字
text: '节点名字',
flex: 1//比例显示
},
{
text : '内容预览',
xtype : 'gridcolumn',//表列
dataIndex: 'content',//显示内容对应 store的fields里的content
flex: 1
}
]
});
});
建立一个树的实体：
package excelTree;
import java.util.List;
public class TreeModel {
public String id;
public String node;
public String content;
public boolean leaf;
public List<TreeModel>children;//一次性加载用，异步不用。json 数据List用[]包住，list内 元素用{}。
public String getId() {
return id;
}
public void setId(String id) {
this.id = id;
}
public String getNode() {
return node;
}
public void setNode(String node) {
this.node = node;
}
public String getContent() {
return content;
}
public void setContent(String content) {
this.content = content;
}
public boolean isLeaf() {
return leaf;
}
public void setLeaf(boolean leaf) {
this.leaf = leaf;
}
public List<TreeModel> getChildren() {
return children;
}
public void setChildren(List<TreeModel> children) {
this.children = children;
}
}
获取树的data的java方法
package excelTree;
import java.util.ArrayList;
import java.util.List;
import javax.naming.NamingException;
import com.opensymphony.xwork2.ActionSupport;
import common.tools;
import excel.Excel;
import excel.ExcelBeanRemote;
public class TreeData extends ActionSupport {
/**
*
*/
private static final long serialVersionUID = 1L;
final String pjName = new tools().moduleName();
public List<TreeModel>children;//记得get和set不然获取不到数据，js页面root没设置， 默 认children
public String ids;//get和set得到 前台传来的 父ID
public List<TreeModel> getChildren() {
return children;
}
public void setChildren(List<TreeModel> children) {
this.children = children;
}
public String getIds() {
return ids;
}
public void setIds(String ids) {
this.ids = ids;
}
public ExcelBeanRemote remote(){
ExcelBeanRemote remote = null;
try {
remote = (ExcelBeanRemote) new tools().getContext().lookup(pjName+"ExcelBean!excel.ExcelBeanRemote");
} catch (NamingException e) {
e.printStackTrace();
}
return remote;
}
public String GetTreenode()
{
children=new ArrayList<TreeModel>();//实例化 List,这步记得加
List<Excel>excel=new ArrayList<Excel>();
excel=remote().getExcelParts(Integer.parseInt(ids));//根据父ID到 数据库获取其 下的节点
for(int i=0;i<excel.size();i++)//放进List 的-children获取数据
{
TreeModel ok=new TreeModel();
ok.setId(excel.get(i).getTestid().toString());
ok.setContent(excel.get(i).getNaturetext());
ok.setNode(excel.get(i).getNaturename());
ok.setLeaf(Boolean.parseBoolean(excel.get(i).getSheetname()));//如果 String 参数不是 null 且在忽略大小写时等于"true"，则返回的 boolean 表示 true 值。
children.add(ok);
}
return SUCCESS;//返回数据children
}
}
structs.xml配置
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE struts PUBLIC
"-//Apache Software Foundation//DTD Struts Configuration 2.3//EN"
"http://struts.apache.org/dtds/struts-2.3.dtd">
<struts>
<constant name="struts.multipart.maxSize" value="20971520" ></constant>
<package name="extjs4" extends="json-default" namespace="/">
<!--tree Test，返回类型json-->
<action name = "getTreeData" class ="excelTree.TreeData" method="GetTreenode">
<result type="json"></result>
</action>
</package>
</struts>