ExtJS树结构

现在要显示一个树图：
Root
  |--省
      |--市
          |--县区说明：省、市、县区分别在三张表里，
默认显示全部“省份”（只查询省份表，不同时查询地市和县区表），当点击省份时在显示“地市”...
谁有这样的例子也可以
谢谢了!

解决方案 »

  1.   

    extjs不熟，但是可以用一张表+dtree做出来，哈哈。
      

  2.   

    在 tree的load 事件里判断加载的是神马类型的node 
    调用相应的方法查找相应的数据
      

  3.   

     干脆 我直接贴代码得了：<%@ page language="java" import="java.util.*" pageEncoding="GB18030"%>
    <%@ taglib uri="/WEB-INF/c.tld" prefix="c"%>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>中国移动客户交费系统</title>
    <link href="css/css.css" rel="stylesheet" type="text/css" />
    <link href="css/frame.css" rel="stylesheet" type="text/css" />
    </head><body>
    <div id="head"></div>
    <div id="body">
    <div class="left" id="treeArea">
    <script type="text/javascript">
    var id;
    function Node(parentId, id, openStatus, text, url, color){
    this.parentId = parentId; // 父节点的id
    this.id     = id;    // 自身id
    this.href   = url;
    this.color  = color;
    this.openStatus = openStatus; // 当前的打开状态
    this.haveChild = false;  // 为了便于显示，增加了该属性，判断该节点是否有子节点，默认为没有
    this.text  = text; // 显示的文本信息
    }
    // 定义一个数组用来保存所有的节点(Node)包括根节点(RootNode), 也可以用其他的方式来保存
    var arrTree = new Array();
    //为了在使得创建节点更方便点，定义了下面的函数：
    function createNode(parentId, id, openStatus, text, url, color){
    if( parentId > -1 ){
    if(!arrTree[parentId].hasChild)
    arrTree[parentId].hasChild = true;
    }
    var node = new Node(parentId, id, openStatus, text, url, color);
    try{
    arrTree[id]=node;
    }catch(e)
    {
    // arrTree[arrTree.length]=node;
    alert(e);
    }
    }
    /*-1这里定义为根节点的父节点，不存在这样的节点，所以，判断节点的父节点为-1时，标识当前节点时父节点*/

    createNode(-1/*上面的注释*/, 0/*节点id*/, true/*关闭*/, "中国移动客户交费系统", '','blue');
    <c:forEach items="${rightsList}" var="right">
    createNode(${right.parentId},${right.rightId},false,'${right.rightName}','${right.rightUrl}');
    </c:forEach> 
    createNode(0, 9999,  true, '注销','./logout.jsp');
    /*
    这里简单的创建了一棵树，但是还没有显示，下面要做的就是怎么显示:
    可能方法是有点笨拙，不要见怪
    …. 显示树
    // 这个思路很容易理解，就是从根节点开始， 在arrTree数组超找该根节点的子节点并显示，
    这里用的是递归方式去遍历每棵树， 由于简单的结构很简单的想法，所以没有考虑算法的效率问题
    */
    function doRender(){
    var r = appendNode(0);
    treeArea.appendChild(r);
    }
    // AppendNode(node), 将该节点的子节点加载到container里面， 就是div对象
    function appendNode(id){
    node = arrTree[id]
    var id = node.id;
    var area = document.createElement("div");
    var expand = document.createElement("span");
    var textNode = document.createElement("span");
    var subarea = document.createElement("div");

    var str = ''
    if( node.href ){
    str += '<a href="'+node.href+'" target="main" ';
    if( node.color )
    str += ' style="color:'+node.color+';"';
    str += '>'+ node.text + '</a> ';
    } else {
    if( node.color )
    str += '<font color="'+node.color+'">'+ node.text+'</font>';
    else
    str = node.text;
    }
    textNode.innerHTML = str;
    expand.style.fontFamily = 'Fixedsys';
    expand.style.cursor = 'hand';
    expand.style.color = 'red';
    expand.style.padding = '5px';
    expand.innerHTML = '<img src="images/file.gif" alt="'+id+'"/>';
    subarea.style.paddingLeft = '10px';
    subarea.style.lineHeight = '2';
    if( !node.openStatus ){
    subarea.style.display = 'none';
    }
    area.style.padding = '4px';
    area.appendChild(expand);
    area.appendChild(textNode);
    area.appendChild(subarea);
    if(node.hasChild){
    expand.innerHTML = '<img src="images/close.gif" alt="'+id+'"/>';
    if( node.openStatus ) {expand.innerHTML = '<img src="images/open.gif" alt="'+id+'"/>' }
    expand.onclick = function(){

    //<c:set var='pid' value='' scope='session'/>
    //self.parent.frames["main"].setParentId(id);

    if( subarea.style.display == '' ){
    node.openStatus = false;
    this.innerHTML = '<img src="images/close.gif" alt="'+id+'"/>';
    subarea.style.display = 'none';
    } else {
    node.openStatus = true;
    this.innerHTML = '<img src="images/open.gif" alt="'+id+'"/>';
    subarea.style.display = '';
    }
    }
    for(var i=id; i < arrTree.length; i++ ){
    if(arrTree[i] && arrTree[i].parentId == id ){
    var c = appendNode(i);
    subarea.appendChild(c);
    }
    }
    }
    return area; // 返回div对象，里面包含了子树的信息
    }
    doRender();
    </script>
    </div>

    <div class="right">
    <iframe width="820" height="485" name="main" ></iframe>
    </div>

    </div></body>
    </script></div></div>
    </html>
     看上了给点分哦.