用javascript 实现的TreeView控件 支持 IE ,Firefox

---------------ajaxTreeView.js------------------------------
  if(typeof ajaxTreeNode =="undefined"){
             //ID,值，优先级,父ID
             function ajaxTreeNode(keyId,keyValue,pIdx,keyPri,isTop){
                    this.keyId=keyId ;
                    this.keyValue=keyValue ;
                    this.keyPri=keyPri ;
                    this.pIdx=pIdx;
                    this.IsTop=isTop ;
                    this.pLevel=0;
                    this.pNode=null ;
                    this.pState=1;//当前状态 0：展开，1：收起---------------------默认值为1
                    this.subs=new Array ();                  
             }  
    }
    if(typeof ajaxTreeView=="undefined"){
            
             function ajaxTreeView(ownerId,dirId,sortOrder,dirType,selectedNodeId){
                  this.Owner=ownerId ;
                  this.RootDirId=dirId ;
                  this.SortDirection=sortOrder ;
                  this.DirType=dirType ;
                  this.SelectedId=selectedNodeId;
                  this.RootTreeNode=new Array ();
                  this.DirData="";
                  this.Container=false ;
                  this.FetchDataOver=false ;
                  this.RenderOk=false ;
                  this.tmp=new Array ();
                  var  cTh=this;
               
                  this.createHttp=function () {
                        var http=false ;
                        if(typeof ActiveXObject !="undefined"){
                            try
                            {
                                http=new ActiveXObject("Msxml2.XMLHTTP");
                            }
                            catch(e)
                            {
                                try
                                {
                                    http=new ActiveXObject("Microsoft.XMLHTTP");
                                }
                                catch(E)
                                {
                                    http=false ;
                                }
                            }
                        } else if(XMLHttpRequest ){
                               try
                               {
                                   http=new XMLHttpRequest();
                               }
                               catch(e)
                               {
                                   http=false ;
                               }
                        }
                        return http ;
                   
                 }
                 this.init=function(){
                     var xmlHttp=cTh.createHttp();
                     if(!xmlHttp )
                        return ;
                     var querys="DirType="+cTh.dirType +"&DirId="+cTh.rootId +"&SelID="+cTh.selectedNodeId ;
                     var url="DirGet.aspx?"+querys ;
                     xmlHttp.open("GET",url ,true );
                     xmlHttp.onreadystatechange=function (){
                          if(xmlHttp.readyState==4){
                             if(xmlHttp.status==200){
                                     cTh.DirData =xmlHttp.responseText;
                                     cTh.FetchDataOver =true ;
                                     cTh.render();
                             }  
                          } 
                     }
                     xmlHttp.send(null );
                 }
                    //排序
                 this.ascSortCallback=function(x,y){
                        if(x.keyPri>y.keyPri)
                            return 1;
                        else  if(x.keyPri= y.keyPri)
                            return 0;
                        else
                            return -1;
                   }
                 this.descSortCallback=function(x,y){
                       if(x.keyPri>y.keyPri)
                            return -1;
                        else  if(x.keyPri= y.keyPri)
                            return 0;
                        else
                            return 1;
                        
                 }
                 
                  this.addTreeNode=function(treeNode){
                         var find=false ;
                         for(var i=0;i<cTh.tmp.length ;i++){
                              if(cTh.tmp[i].keyId==treeNode.keyId){
                                  find =true ;
                                  break;
                              }
                         }
                         if(treeNode.pIdx==cTh.RootDirId){
                            var b=false ;
                            for(var i=0;i<cTh.RootTreeNode.length ;i++){
                                if(cTh.RootTreeNode[i].keyId==treeNode.keyId){
                                    b=true;
                                    break;
                                }
                            }
                            if(!b){
                                    cTh.RootTreeNode.push(treeNode );
                            }
                         }
                         if(!find){
                                 cTh.tmp.push(treeNode);
                         }
                  }
                  this.getTreeNode=function(treeNode,idx){
                          //根据ID查找当前ID。
                          var cn;
                          if(treeNode.keyId==idx)                              
                                 cn= treeNode ;
                          else
                               for(var i=0;i<treeNode.subs.length;i++){
                                 cn= cTh.getTreeNode(treeNode.subs[i],idx);
                                 if(cn)
                                    break;
                               }
                          return cn ;
                  }
                  this.close=function(treeNode){
                       
                        treeNode.pState=1;
                        for(var i=0;i<treeNode.subs.length;i++){
                            cTh.close(treeNode.subs[i]);
                        }
                  }
                  this.expand=function(treeNode){
                        treeNode.pState=0;
                        var cxp=treeNode.pNode;
                        while(cxp !=null){ 
                            cxp.pState=0;
                            cxp =cxp.pNode;
                        }
                  }
                
                 this.render=function(){
                       
                        if(cTh.Container ==false  ||   cTh.FetchDataOver ==false  ){
                                 return ;
                        }
                        if(cTh.RenderOk )  return ;
                        cTh.RenderOk =true ;
                        var rows=cTh.DirData.split(";");
                        var i=rows.length;
                        for(var j=0;j<i;j++){
                            var dir=rows[j].split(",");
                            var cd=new ajaxTreeNode(dir[0], dir[1],dir[2],dir[3],dir[4]);
                            cTh.addTreeNode(cd);
                         }
                        if(cTh.SortDirection =="asc"){
                            cTh.RootTreeNode.sort(cTh.ascSortCallback );
                        } else {
                            cTh.RootTreeNode.sort(cTh.descSortCallback );
                        }
                        var selectedNode;
                        for(var i=0;i<cTh.RootTreeNode.length;i++){
                               cTh.createTree(cTh.RootTreeNode[i]);
                               if(!selectedNode ){
                                  selectedNode =cTh.getTreeNode(cTh.RootTreeNode[i],cTh.SelectedId);
                               }
                        }
                        if(selectedNode ){
                            cTh.expand(selectedNode );
                            alert("FIND");
                        }
                        for(var i=0;i<cTh.RootTreeNode.length;i++){
                               cTh.clientShow(cTh.RootTreeNode[i]);
                        }
                       
                        
                  }
                  this.getSubs=function(treeNode){
                         var subs=new Array ();
                         for(var i=0;i<cTh.tmp.length;i ++){
                              if(cTh.tmp[i].pIdx==treeNode.keyId){
                                     subs.push(cTh.tmp[i]);
                              }
                         }
                         if(subs.length >=2){
                               if(cTh.SortDirection =="asc"){
                                    subs.sort(cTh.ascSortCallback);
                                } else {
                                    subs.sort(cTh.descSortCallback );
                                }
                         }
                         return subs ;
                  }
                  this.createTree=function(treeNode){
                        var subs=cTh.getSubs(treeNode);
                        for(var i=0;i<subs.length;i++){
                             subs[i].pNode=treeNode ;
                             subs[i].pLevel=treeNode.pLevel+1;
                             treeNode.subs.push(subs[i]);
                             cTh.createTree(subs[i]);
                        }                     
                  }
                
                  this.clientShow=function (treeNode){
                       var dv=document.createElement("div");
                       dv.setAttribute("class","v"+treeNode.pLevel);
                       dv.setAttribute("className","v"+treeNode.pLevel);
                       if(treeNode.subs.length>0)
                       {
                           if(window.attachEvent){
                              //IE
                              
                                var btn=document.createElement("img");
                                btn.setAttribute("idx",treeNode.keyId);
                         
                                if(treeNode.pState==0){
                                      btn.setAttribute("src","collaps.gif");
                                } else {
                                     btn.setAttribute("src","expand.gif");
                                }
                                btn.attachEvent("onclick",cTh.onClick );
                                dv.appendChild(btn);
                               
                           } else {
                              
                                var btn=document.createElement("input");
                                btn.setAttribute("idx",treeNode.keyId);
                                btn.setAttribute("type","button");
                                if(treeNode.pState==0){
                                    btn.setAttribute("value","-");
                                } else {
                                    btn.setAttribute("value","+");
                                }
                                btn.addEventListener("click",cTh.onClick,false);
                                dv.appendChild(btn);
                           }
                       }
                       {
                             var ahref=document.createElement("a");
                             if(treeNode.IsTop==0){
                                    ahref.setAttribute("href","/kb/top1_i"+treeNode.keyId+".htm");
                             } else {
                                    ahref.setAttribute("href","/kb/i"+treeNode.keyId+".htm");
                             }
                             ahref.setAttribute("title",treeNode.keyValue);
                             ahref.appendChild(document.createTextNode(treeNode.keyValue));
                             dv.appendChild(ahref );
                       }
                       dv.appendChild(document.createTextNode(treeNode.keyPri));
                       document.getElementById(cTh.Owner).appendChild(dv);
                       if(treeNode.pState==0){
                                   //----------------展开
                                   for(var i=0;i<treeNode.subs.length;i++){
                                       cTh.clientShow(treeNode.subs[i]);
                                   }
                       } 
                  } 

              
                  this.onClick=function(evt){
                        var dirId;
                        if(window.event){
                           dirId=window.event.srcElement["idx"];
                        } else {
                           dirId=evt.target.attributes[1].nodeValue;
                        }
                        if(!dirId )
                           return ;
                       for(var i=0;i<cTh.RootTreeNode.length ;i++){
                          var ct=cTh.getTreeNode(cTh.RootTreeNode[i],dirId );
                          if(ct){
                             break;
                          }
                       }
                       if(ct.pState==1){
                          cTh.expand(ct);
                       }  else {
                          cTh.close(ct );
                       }
                      
                       var lc=document.getElementById(cTh.Owner).childNodes.length ;
                       for(var  i=lc -1;i>=0;i--){
                           document.getElementById(cTh.Owner).removeChild(document.getElementById(cTh.Owner).childNodes[i]);
                       }
                       for(var i=0;i<cTh.RootTreeNode.length;i++){
                               cTh.clientShow(cTh.RootTreeNode[i]);
                       }
                  }
                  this.onContainerLoad=function(){
                          cTh.Container=true ;
                          cTh.render();
                  }
                 
             }
    }
---------------------------------------演示代码 ajaxTree3.htm-----------------------
<!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>
    <title>无标题页</title>
     <style type="text/css">
    .v0{
      padding:0;
    }
    .v1{
       padding-left:20px;
    }
    .v2{
       padding-left:40px;
    }
    .v3{
       padding-left:60px;
    }
    .v4{
       padding-left:80px;
    }
   
    </style>
</head>
<body>
<div>
      <script language="javascript" type="text/javascript" >
        var dv=new ajaxTreeView("txt",0,"desc","KB",22);
          dv.init();
      </script>
      <div id="txt"></div>
      <script language="javascript" type="text/javascript">
       dv.onContainerLoad();
       dv.render();
      </script>
    </div>

</body>
</html>
---------------------------------------服务器端配置--------------
public class DirectoryHttpHandle:IHttpHandler
{
    public DirectoryHttpHandle()
    {
        //
        //TODO: 在此处添加构造函数逻辑
        //
    }

    #region IHttpHandler 成员

    public bool IsReusable
    {
        get { return true; }
    }

    public void ProcessRequest(HttpContext context)
    {
        string dirId = context.Request.QueryString["DirID"];
        string dirType = context.Request.QueryString["DirType"];
        context.Response.Clear();
        /*   var d1=new directoryInfo(1,"司法考试",0,1,1);
                var d10=new directoryInfo(2,"刑法",1,1,2);
                    var d201=new directoryInfo(21,"x1",2,1,3);
                    var d202=new directoryInfo(22,"x2",2,2,3);
                        var c01=new directoryInfo(220,"xc1",22,1,4);
                        var c02=new directoryInfo(221,"xc2",22,2,4);
                        var c03=new directoryInfo(222,"xc3",22,3,4);
                    var d203=new directoryInfo(23,"x3",2,3,3);
                var d11=new directoryInfo(3,"民法",1,2,2);
                    var d301=new directoryInfo(31,"m1",3,1,3);
                    var d302=new directoryInfo(32,"m2",3,2,3);
                    var d303=new directoryInfo(33,"m3",3,3,3);
                var d12=new directoryInfo(4,"商法",1,3,2);
                    var d401=new directoryInfo(41,"s1",4,1,3);
                    var d402=new directoryInfo(42,"s2",4,2,3);
                    var d403=new directoryInfo(43,"s3",4,3,3);*/
        DirectoryInfo[] dris = new DirectoryInfo[]{
               new DirectoryInfo(1, "司法考试",0,1,1),
                   new DirectoryInfo(2,"刑法",1,2),
                       new DirectoryInfo(21,"刑法 & 第一章",2,1),
                       new DirectoryInfo(22,"刑法第二章",2,2),
                           new DirectoryInfo(221,"第二章第1节",22,1),
                           new DirectoryInfo(222,"第二章第2节",22,2),
                           new DirectoryInfo(223,"第二章第3节",22,3),
                       new DirectoryInfo(23,"刑法第三章",2,3),
                   new DirectoryInfo(3,"明法",1,3),
                       new DirectoryInfo(31,"明法第一章",3,1),
                       new DirectoryInfo(32,"明法第二章",3,2),
                       new DirectoryInfo(33,"明法第三章",3,3),
                  new DirectoryInfo(4,"商法",1,4),
                      new DirectoryInfo(41,"商法第一章",4,1),
                      new DirectoryInfo(42,"商法第二章",4,2),
                      new DirectoryInfo(43,"商法第三章",4,3),
               new DirectoryInfo(100, "律师考试",0,2,1),
                   new DirectoryInfo(10002,"大律师法",100,1),
                       new DirectoryInfo(100001,"律师法第一章",10002,1),
                       new DirectoryInfo(100002,"律师法第二章",10002,2),
                     new DirectoryInfo(10003,"中级律师",100,1)
        };
        foreach (DirectoryInfo dir in dris)
        {
            context.Response.Write(dir.DirId);
            context.Response.Write(",");
            context.Response.Write(dir.DirName.Trim(new char[] { ',', ';' }));
            context.Response.Write(",");
            context.Response.Write(dir.ParentId);
            context.Response.Write(",");
            context.Response.Write(dir.OrderId);
            context.Response.Write(",");
            context.Response.Write(dir.IsTop);
            context.Response.Write(";");
        }
        context.Response.Flush();
        context.Response.End();

       

    }

    #endregion
}

public class DirectoryInfo
{
    public int DirId;
    public string DirName;
    public int Level;
    public int ParentId;
    public int OrderId;
    public int IsTop;
    public DirectoryInfo(int dirId, string dirName, int pId, int order,int isTop)
    {
        DirId = dirId;
        DirName = dirName;
        Level = 0;
        ParentId = pId;
        OrderId = order;
        IsTop = isTop;
    }
    public DirectoryInfo(int dirId, string dirName, int pId, int order)
        : this(dirId, dirName, pId, order, 0)
    {
    }
}

--------------------------------Web.config
<add verb="*" path="DirGet.aspx" type="DirectoryHttpHandle"/>
----------------------------------------------