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'}]

=====运行效果如附件=====
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值