Ext_tree(动态tree)
以下是一个和数据库进行交互的一个动态树的一个示例:
以下是一个dttree.jsp:
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>动态Tree</title>
<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>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
<style type="text/css">
.b{
background-image: url(img/add16.gif)!important;
}
</style>
</head>
<script type="text/javascript">
Ext.onReady(function(){
var root=new Ext.tree.AsyncTreeNode({//生成Tree的根节点
text:"中国",
id:"0",//默认为0
draggable : false,
iconCls:"b"
});
//定义一个treePanel,用来显示tree的结构
var treePanel=new Ext.tree.TreePanel({
title:"动态Tree",
width:350,
height:300,
root:root,
renderTo:Ext.getBody(),
autoScroll:true,//显示滚动条
animate : true,//true表示使用动画展开/折叠
//enableDD : true,//允许拖放
containerScroll : true,//登记本容器ScrollManager
listeners:{//在加载之前的一个监听事件
'beforeload':function(node){
alert(node.id);//得到的节点
node.loader=new Ext.tree.TreeLoader({//树节点的数据来源
url:"treeServlet",//请求的路径
baseParams:{//请求参数
id:node.id
}
});
}
}
});
//treePanel.setRootNode(root);//追加节点
treePanel.on('click', function(tree, node){
alert("fsdf");
});
treePanel.render();//重新加载数据
});
</script>
<body><br><br></body>
</html>
以下是一个servlet:TreeServlet.java
package com.wm.sevlet;
import java.io.IOException;
import java.io.PrintWriter;
import java.sql.SQLException;
import java.util.List;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.wm.dao.CtiyDao;
import com.wm.pojo.City;
public class TreeServlet extends HttpServlet {
/**
* Constructor of the object.
*/
public TreeServlet() {
super();
}
/**
* Destruction of the servlet. <br>
*/
public void destroy() {
super.destroy(); // Just puts "destroy" string in log
// Put your code here
}
/**
* The doGet method of the servlet. <br>
*
* This method is called when a form has its tag value method equals to get.
*
* @param request the request send by the client to the server
* @param response the response send by the server to the client
* @throws ServletException if an error occurred
* @throws IOException if an error occurred
*/
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
this.doPost(request, response);
}
/**
* The doPost method of the servlet. <br>
*
* This method is called when a form has its tag value method equals to post.
*
* @param request the request send by the client to the server
* @param response the response send by the server to the client
* @throws ServletException if an error occurred
* @throws IOException if an error occurred
*/
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setContentType("text/html");
PrintWriter out = response.getWriter();
StringBuffer sb=new StringBuffer();
String id=request.getParameter("id");
CtiyDao cd=new CtiyDao();
try {
List list=cd.findAllCity(Integer.parseInt(id));
sb.append("[");
for (int i = 0; i < list.size(); i++) {
City city=(City) list.get(i);
if(list.size()-1>i){
sb.append("{id:"+city.getTid()+",firstId:"+city.getFirstId()+",text:'"+city.getCityType()+"'},");
}else{
sb.append("{id:"+city.getTid()+",firstId:"+city.getFirstId()+",text:'"+city.getCityType()+"'}");
}
}
sb.append("]");
} catch (ClassNotFoundException e) {
// TODO Auto-generated catch block
e.printStackTrace();
} catch (SQLException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
/// System.out.println(sb.toString());
out.print(sb.toString());
}
/**
* Initialization of the servlet. <br>
*
* @throws ServletException if an error occure
*/
public void init() throws ServletException {
// Put your code here
}
}
数据格式:
[{id:1,firstId:0,text:'beijing'},
{id:2,firstId:0,text:'shanghai'},
{id:3,firstId:0,text:'shandong'},
{id:4,firstId:0,text:'tianjin'}]
=====运行效果如附件=====
以下是一个dttree.jsp:
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>动态Tree</title>
<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>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
<style type="text/css">
.b{
background-image: url(img/add16.gif)!important;
}
</style>
</head>
<script type="text/javascript">
Ext.onReady(function(){
var root=new Ext.tree.AsyncTreeNode({//生成Tree的根节点
text:"中国",
id:"0",//默认为0
draggable : false,
iconCls:"b"
});
//定义一个treePanel,用来显示tree的结构
var treePanel=new Ext.tree.TreePanel({
title:"动态Tree",
width:350,
height:300,
root:root,
renderTo:Ext.getBody(),
autoScroll:true,//显示滚动条
animate : true,//true表示使用动画展开/折叠
//enableDD : true,//允许拖放
containerScroll : true,//登记本容器ScrollManager
listeners:{//在加载之前的一个监听事件
'beforeload':function(node){
alert(node.id);//得到的节点
node.loader=new Ext.tree.TreeLoader({//树节点的数据来源
url:"treeServlet",//请求的路径
baseParams:{//请求参数
id:node.id
}
});
}
}
});
//treePanel.setRootNode(root);//追加节点
treePanel.on('click', function(tree, node){
alert("fsdf");
});
treePanel.render();//重新加载数据
});
</script>
<body><br><br></body>
</html>
以下是一个servlet:TreeServlet.java
package com.wm.sevlet;
import java.io.IOException;
import java.io.PrintWriter;
import java.sql.SQLException;
import java.util.List;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.wm.dao.CtiyDao;
import com.wm.pojo.City;
public class TreeServlet extends HttpServlet {
/**
* Constructor of the object.
*/
public TreeServlet() {
super();
}
/**
* Destruction of the servlet. <br>
*/
public void destroy() {
super.destroy(); // Just puts "destroy" string in log
// Put your code here
}
/**
* The doGet method of the servlet. <br>
*
* This method is called when a form has its tag value method equals to get.
*
* @param request the request send by the client to the server
* @param response the response send by the server to the client
* @throws ServletException if an error occurred
* @throws IOException if an error occurred
*/
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
this.doPost(request, response);
}
/**
* The doPost method of the servlet. <br>
*
* This method is called when a form has its tag value method equals to post.
*
* @param request the request send by the client to the server
* @param response the response send by the server to the client
* @throws ServletException if an error occurred
* @throws IOException if an error occurred
*/
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setContentType("text/html");
PrintWriter out = response.getWriter();
StringBuffer sb=new StringBuffer();
String id=request.getParameter("id");
CtiyDao cd=new CtiyDao();
try {
List list=cd.findAllCity(Integer.parseInt(id));
sb.append("[");
for (int i = 0; i < list.size(); i++) {
City city=(City) list.get(i);
if(list.size()-1>i){
sb.append("{id:"+city.getTid()+",firstId:"+city.getFirstId()+",text:'"+city.getCityType()+"'},");
}else{
sb.append("{id:"+city.getTid()+",firstId:"+city.getFirstId()+",text:'"+city.getCityType()+"'}");
}
}
sb.append("]");
} catch (ClassNotFoundException e) {
// TODO Auto-generated catch block
e.printStackTrace();
} catch (SQLException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
/// System.out.println(sb.toString());
out.print(sb.toString());
}
/**
* Initialization of the servlet. <br>
*
* @throws ServletException if an error occure
*/
public void init() throws ServletException {
// Put your code here
}
}
数据格式:
[{id:1,firstId:0,text:'beijing'},
{id:2,firstId:0,text:'shanghai'},
{id:3,firstId:0,text:'shandong'},
{id:4,firstId:0,text:'tianjin'}]
=====运行效果如附件=====