extjs 加上dwr tree

 

 

这里是js类   创建一个树。。

从java 类中 直接返回一个 bean  的集合 （List  ,Set）都行。。。

Ext.BLANK_IMAGE_URL  =   ' js/resources/images/vista/s.gif ' ;

Ext.onReady( function ()  ... {
    var i = 20;
                                                        //从DWR中加载 数据 自动转换成  json  格式
        var treeLoader = new Ext.tree.DWRTreeLoader(...{


            dwrCall : CheckBean.getTreeNode  //调用 java  方法
        });

        // 定义树
        var Tree = Ext.tree;

        var tree = new Tree.TreePanel( ...{

            el : 'tree-div', // 目标div容器

            

            animate : true,

            enableDD : true,

            containerScroll : true,

            loader : treeLoader

        });
                                          

                                          // 树 中加入一个右键菜单 事件
        tree.on('contextmenu', onContextMenu);

        function onContextMenu(node, e) ...{
            var menu;
            if (!menu) ...{
                menu = new Ext.menu.Menu([ ...{

                    id : node.id + 'add',
                    text : '添加一个文件',
                    handler : function() ...{

                        node.appendChild(new Tree.AsyncTreeNode( ...{

                            text : node.childNodes.length.toString(),
                            id : i++ + '',
                            expanded : true
                        }));

                    }
                }, ...{

                    id : node.id + 'del',
                    text : '删除接点',
                    handler : function() ...{
                        if (node.id != -1) ...{
                            node.remove();
                        }else...{
                        
                            Ext.Msg.alert('错误','根结点不能删除');
                        }
                    }
                }]);

            }

            menu.showAt(e.getPoint());
            node.on('append',onAppend);
            
            function onAppend(tree,thisNode,newNode,index )...{
            
                    alert();
                    
            
            }
            
            
        }

        // 定义根节点
        var root = new Ext.tree.AsyncTreeNode( ...{

            text : '组织机构图',

            draggable : false,

            id : '-1'// 默认的node值：?node=-1

        });

        tree.setRootNode(root);

        tree.render();

        root.expand();

    } );

 

bean 的命名 必须 遵守规范

所有字段 必须遵守命名规范 

如何不想使用这样的命名 就要修改  Ext.tree.DWRTreeloader.js这个类

 

package  com;

import  java.util.List;

public   class  OrgBean  ... {
    
    
    // 是否加载  字节点 下的所有节点
    private boolean childrenLoaded = false; 
    // 是否用子节点
    private boolean hasChildren = true;
    // 是否加载时候展开    
    private boolean expanded = false;
    // tree 的 id 属性
    private String id;
    // tree 的 name 属性
    private String text;
    // 当前类的集合
    private List<OrgBean> children;



    public List<OrgBean> getChildren() ...{
        return children;
    }

    public void setChildren(List<OrgBean> children) ...{
        this.children = children;
    }

    public String getId() ...{
        return id;
    }

    public void setId(String id) ...{
        this.id = id;
    }

    public String getText() ...{
        return text;
    }

    public void setText(String text) ...{
        this.text = text;
    }





    public boolean isChildrenLoaded() ...{
        return childrenLoaded;
    }

    public void setChildrenLoaded(boolean childrenLoaded) ...{
        this.childrenLoaded = childrenLoaded;
    }

    public boolean isExpanded() ...{
        return expanded;
    }

    public void setExpanded(boolean expanded) ...{
        this.expanded = expanded;
    }

    public boolean isHasChildren() ...{
        return hasChildren;
    }

    public void setHasChildren(boolean hasChildren) ...{
        this.hasChildren = hasChildren;
    }

    

}

 

OrgDwr.java

没什么好说的 一个  递归  加载数据

package  com;

import  java.util.List;

public   class  OrgDwr  ... {

    private OrgDAO orgDAO = new OrgDAO();

    public List<OrgBean> getTreeNode(String treeId) ...{
        System.out.println(treeId);
        List<OrgBean> list = orgDAO.findByParentID(Integer.parseInt(treeId));

        

        return get(list);
    }

    private List<OrgBean> get(List<OrgBean> list) ...{

        for (OrgBean bean : list) ...{
            System.out.println(bean.getText());
            List<OrgBean> list2 = orgDAO.findByParentID(Integer.parseInt(bean.getId()));
            
            
            if (list2.size()>0) ...{
                bean.setChildren(list2);
                get(list2);
                break;
            }
            
            bean.setHasChildren(false);

        }
        
        return list;
    }

}

 

html  如何 引用  超级简单  把几个 js 加载进去就ok了

 

<% ... @ page language="java" import="java.util.*"  pageEncoding="GBK" %>
<% ...
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://"
            + request.getServerName() + ":" + request.getServerPort()
            + path + "/";
%>

<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" >
< html >
     < head >
         < base  href ="<%=basePath%>" >

         < title > My JSP 'org.jsp' starting page </ title >


         < link  rel ="stylesheet"  type ="text/css"
            href ="js/resources/css/ext-all.css"   />
         < script  type ="text/javascript"  src ="js/ext-base.js" ></ script >
         < script  type ="text/javascript"  src ="js/ext-all.js" ></ script >
         < script  type ="text/javascript"  src ="js/MyAsynTreeNode.js" ></ script >
         < script  type ="text/javascript"  src ="js/DWRTreeLoder.js" ></ script >
         < script  type ='text/javascript'
             src ='/ExtTree/dwr/interface/CheckBean.js' ></ script >
         < script  type ='text/javascript'  src ='/ExtTree/dwr/engine.js' ></ script >

         < script  type ='text/javascript'  src ='/ExtTree/dwr/util.js' ></ script >

         < script  type ="text/javascript"  src ="js/extdwr.js" ></ script >
     </ head >

     < body >
                                             <!--   树加载的位置   -->
         < div  id ="tree-div"
            style ="overflow:auto; height:300px;width:200px;border:2px solid #c3daf9;" ></ div >

     </ body >
</ html >

 

用需要 源码的话 把邮箱留下来  我给你们传过去