Ajax+dtree实现动态加载无刷新树

   今天研究了很久，终于把动态加载无刷新树给整出来了，反正刚开始也是在网上搜了很多东东，但感觉都不太方便，最后找到了dtree，又发现一位朋友把dtree的源代码进行了更改，（dtree发布于2003年，那时编写这个javascript脚本的作者估计还不知道ajax这玩意吧，呵呵），就可以实现无刷新动态加载了，废话不说，先把例子整理出来先！

首先是Sql脚本（MSSQL）

 

IF   EXISTS  ( SELECT   *   FROM  SYSOBJECTS  WHERE  NAME = ' PERMISSION ' )
DROP   TABLE  PERMISSION
CREATE   TABLE  PERMISSION
(
PERMISSION_ID  INT   IDENTITY   PRIMARY   KEY ,
PERMISSION_NAME  VARCHAR ( 20 )  NOT   NULL ,
PARENT_ID  INT
)
GO

ALTER   TABLE  PERMISSION  ADD   CONSTRAINT  FK_PARENTID  FOREIGN   KEY (PARENT_ID)   REFERENCES  PERMISSION(PERMISSION_ID)

GO
SELECT   *   FROM  PERMISSION


-- 根目录，树开始的地方
INSERT   INTO  PERMISSION(PERMISSION_NAME)  VALUES  ( ' 根目录 ' )

-- 根目录下的子节点
INSERT   INTO  PERMISSION  VALUES  ( ' 个人事物 ' , 1 )
INSERT   INTO  PERMISSION  VALUES  ( ' 公共信息 ' , 1 )
INSERT   INTO  PERMISSION  VALUES  ( ' 工作流程 ' , 1 )
INSERT   INTO  PERMISSION  VALUES  ( ' 综合行政 ' , 1 )
INSERT   INTO  PERMISSION  VALUES  ( ' 系统管理 ' , 1 )

-- 以下元素为 个人事物 的子节点
INSERT   INTO  PERMISSION  VALUES ( ' 日程安排 ' , 2 )
INSERT   INTO  PERMISSION  VALUES ( ' 个人考勤 ' , 2 )
INSERT   INTO  PERMISSION  VALUES ( ' 工作日志 ' , 2 )
INSERT   INTO  PERMISSION  VALUES ( ' 内部短信 ' , 2 )
INSERT   INTO  PERMISSION  VALUES ( ' 内部短信 ' , 2 )
INSERT   INTO  PERMISSION  VALUES ( ' 个人设置 ' , 2 )
-- 以下为 个人设置 的子节点
INSERT   INTO  PERMISSION  VALUES ( ' 个人资料 ' , 12 )
INSERT   INTO  PERMISSION  VALUES ( ' 密码修改 ' , 12 )
INSERT   INTO  PERMISSION  VALUES ( ' 权限信息 ' , 12 )

-- 以下为工作流程的子节点
INSERT   INTO  PERMISSION  VALUES ( ' 新建工作流程 ' , 4 )
INSERT   INTO  PERMISSION  VALUES ( ' 待办工作流程 ' , 4 )
INSERT   INTO  PERMISSION  VALUES ( ' 设计工作流程 ' , 4 )


-- -用来测试的
select  permission_id,permission_name, count (permission_id)  from  permission  where   1 = 1   and  parent_id  is   null   group   by  permission_id,permission_name

 

 

然后呢，就是修改后的dtree脚本了，这里只放修改后的部分。。。

 

//  Add by xiaosilent .
//  get child nodes from web server via AJAX automatically 
//  pid : parentID.
dTree.prototype.getChildren  =   function (pid) ... {
    
    var ajax = null;
   
    if (window.ActiveXObject) ...{
    
        try...{
        
            ajax = new ActiveXObject("Microsoft.XMLHTTP");
            
        }catch(e)...{
        
            alert("创建Microsoft.XMLHTTP对象失败,AJAX不能正常运行.请检查您的浏览器设置.");
        }
        
    } else ...{
    
        if (window.XMLHttpRequest) ...{
            
            try...{
                
                ajax = new XMLHttpRequest();
                
            }catch(e)...{
            
                alert("创建XMLHttpRequest对象失败,AJAX不能正常运行.请检查您的浏览器设置.");
            }
            
        }
    }
    
    // following is just for xiaosilent's Sales Management System. 
    // Server gives me a message like this : id1,name1,childCount1|id2,name2,childCount2|...
    // var url ="/servlet/category?action=getChildren&parentID=" + pid +"&type=" + this.type;
    
    var url="treeServlet?parentId="+pid;
    
    
    // use this to get this dTree object in the following function.
    var tree=this;
    
    ajax.onreadystatechange = function () ...{
      
        if (ajax.readyState == 4&&ajax.status == 200) ...{
             
            if(ajax.responseText=="false") 
            ...{
            
              return;
            }
            var categories=ajax.responseText.split('|');
             
            
            for(var i=0;i<categories.length;i++)...{
            
                var aCat = categories[i].split(',');
                
                if(aCat.length==3)...{
                    
                    var id=aCat[0];
                    var name=aCat[1];
                    var childCount=aCat[2];
                    
                    // set different icon for a node, if it has a child set its icon to be a folder image , else default , set to be a file image. And set different link address.
                    if(childCount>0)...{
                        
                        tree.add(id, pid, name, "javascript:"+tree.obj+".getChildren("+id+")", "点击获取其子类",'',tree.icon.folder);
                        
                    }else...{
                        
                        tree.add(id, pid, name, "javascript:"+tree.obj+".showCategory("+id+")", "点击获取详请");
                        
                    }
                }
            }
            
            
            
            tree.show();
            
            tree.openTo(pid);
        }
        
    };
    
    ajax.open("POST",url);
    
    ajax.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
    ajax.send(null);
    
}




dTree.prototype.showCategory  =   function () ... {

}


//  Add by xiaosilent.
//  Call to show the tree .
dTree.prototype.show  =   function () ... {
    
    // Renew the two array to save original data.
    this.aNodes=new Array();
    this.aIndent=new Array();

    // Dump original data to aNode array.
    for(var i=0 ; i<this.aNodesData.length ; i++)...{
        
        var oneNode=this.aNodesData[i];

        this.aNodes[i]=new Node(oneNode.id,oneNode.pid,oneNode.name,oneNode.url,oneNode.title,oneNode.target,oneNode.icon,oneNode.iconOpen,oneNode.open);
    }
    
    this.rewriteHTML();
}

 

然后是html，发现一个问题，为什么把html的页面的编码格式转化成gb2312是话，为什么预览无法显示呢？只有在utf-8的情况下才能正常预览，真挺郁闷的...

 

< html >
< head >
< meta  http-equiv ="Content-Type"  content ="text/html; charset=utf-8"   />
     < link  rel ="StyleSheet"  href ="dtree.css"  type ="text/css"   />
     < script  type ="text/javascript"  src ="dtree.js" ></ script >
</ head >

< body >


< h2 > Example </ h2 >
< p > &nbsp; </ p >

< div  class ="dtree"  id ="dtree1" >
    < script  language ="javascript" > ...
       d = new dTree('d',"dtree1",'goods');
        d.add(0,-1,'点击展开权限信息',"javascript:d.getChildren(-1)");
        d.show();
</ script >

</ div >

< p > &nbsp; </ p >

</ body >

</ html >

 

接下来就是Servlet了，没什么好说的。。。

package  com.servlet;

import  java.io.IOException;
import  java.io.PrintWriter;

import  javax.servlet.ServletException;
import  javax.servlet.http.HttpServlet;
import  javax.servlet.http.HttpServletRequest;
import  javax.servlet.http.HttpServletResponse;
import  com.service. * ;
public   class  TreeServlet  extends  HttpServlet {

    
     public   void  doGet(HttpServletRequest request, HttpServletResponse response)
             throws  ServletException, IOException {
        doPost(request, response);    
    }

    
     public   void  doPost(HttpServletRequest request, HttpServletResponse response)
             throws  ServletException, IOException {
        Integer pid = null ;
        response.setContentType( " text/html " );
        response.setCharacterEncoding( " utf-8 " );
    
        PrintWriter p = response.getWriter();
        String id  = request.getParameter( " parentId " );
         if (id.equals( " -1 " )){
            pid = null ;
            
        } else {
            pid = Integer.parseInt(id);
        }
        
        TreeService treeSer = new  TreeService();
        System.out.println(treeSer.getNodesInfo(pid));
        p.print(treeSer.getNodesInfo(pid));
    
    }

}

 

然后就是业务了...

 

     public  String getNodesInfo(Integer pid) ... {
        String condition=null;
        if(pid==null)
            condition=" and parent_id is null";
        else...{
            condition=" and  parent_id="+pid;
        }
        
        String sql="select permission_id,permission_name,count(permission_id) as c from permission"+
                " where 1=1 "+condition+" group by permission_id,permission_name";
        
        StringBuffer temp=new StringBuffer();
        try ...{
            getConnection();
            pstmt=con.prepareStatement(sql);
            rs=pstmt.executeQuery();
            while(rs.next())...{
                temp.append(rs.getInt("permission_id")+","+rs.getString("permission_name")+","+rs.getInt("c")+"|");
                
            }
            System.out.println("the string value is:"+temp);
        } catch (SQLException e) ...{
            e.printStackTrace();
        }finally...{
            try ...{
                rs.close();
                pstmt.close();
                con.close();
                
            } catch (SQLException e) ...{
                // TODO 自动生成 catch 块
                e.printStackTrace();
            }
        }
    
        return temp.toString();
    }

 

好了，完了，至于源文件的话直接 在csdn上下载吧，我把它上传到我的资源里面