Ext_tree(动态tree) -

wangmengbk

浏览: 293873 次
性别:
来自: 上海

最近访客更多访客>>

yeming471114363

yonge812

zlbmm007

changfengwuhen

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

Ext_tree(动态tree)

博客分类：

EXT Servlet SQL Server 数据结构 DAO

以下是一个和数据库进行交互的一个动态树的一个示例:
以下是一个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">

    

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

=====运行效果如附件=====