一个已经接近完美的树形目录类

写出这个类来，只有一个感觉，累！

从昨天下午开始，一直到现在，才总算把这个东东搞定。不过弄完了还是非常高兴的。

 

  1// JavaScript Document
  2var Tree=function(containnerid){
  3    var _base=this;
  4    var _conid=containnerid;
  5    var _niArr=new Array();
  6    
  7    //设置根节点
  8    this.setRoot=function(title){
  9        return _base.addChild(_conid,title);
 10    }
 11    
 12    //添加子节点
 13    this.addChild=function(parentid,text){
 14        var div=document.createElement("div");
 15        div.id=getChildID(parentid);
 16        div.className="treeText";
 17        var a=document.createElement("a");
 18        a.href=arguments[2]?arguments[2]:"javascript:void(0);";
 19        a.appendChild(document.createTextNode(text));
 20        div.appendChild(a);
 21        
 22        $(parentid).appendChild(div);
 23        return div;
 24    }
 25    //通知所有节点添加完毕，开始格式化节点
 26    this.stopAdd=function(){
 27        formatNode(true,_niArr[0][0],new Array());
 28    }
 29    //测试用，写出节点数组
 30    function writeAll(){
 31        for(var i=0;i<_niArr.length;i++)
 32            for(var j=0;j<_niArr[i].length;j++)
 33                document.write("_niArr[" + i + "][" + j + "].id:" + _niArr[i][j].id + "<br/>");
 34
 35    }
 36    //格式化节点
 37    function formatNode(last,ni,blank){
 38        if(!ni)return;
 39        else{
 40            var len=ni.childID.length;
 41            var level=getLevel(ni.id);
 42            
 43            if(ni.parentID==-1){
 44                for(var i=0;i<len;i++){
 45                    if(i+1==len)last=true;
 46                    else last=false;
 47                    formatNode(last,_niArr[level][ni.childID[i]],new Array());
 48                }
 49            }else{
 50                var img=document.createElement("img");
 51                img.src="Images/folder.gif";
 52                img.className="treeImg";
 53                $(ni.id).insertBefore(img,$(ni.id).firstChild);
 54                img=document.createElement("img");
 55                if(len){
 56                    if(last)
 57                        img.src="Images/Lplus.gif";
 58                    else
 59                        img.src="Images/Tplus.gif";
 60                    img.style.cursor="pointer";
 61                    if(img.attachEvent)
 62                        img.attachEvent("onclick",function(){expandChild(ni,last)});
 63                    else
 64                        img.addEventListener("click",function(){expandChild(ni,last)},false);
 65                }
 66                else{
 67                    if(last){
 68                        img.src="Images/L.gif";
 69                    }else{
 70                        img.src="Images/T.gif";
 71                    }
 72                }
 73                img.className="treeImg";
 74                $(ni.id).insertBefore(img,$(ni.id).firstChild);
 75                if(level>2)$(ni.id).style.display="none";
 76                
 77                for(var i=blank.length-1;i>=0;i--){
 78                    var img1=document.createElement("img");
 79                    if(blank[i]){
 80                        img1.src="Images/B.gif";
 81                        img1.style.width="12px";
 82                        img1.style.height="18px";
 83                    }
 84                    else img1.src="Images/I.gif";
 85                    $(ni.id).insertBefore(img1,$(ni.id).firstChild);
 86                }
 87                
 88                for(var i=0;i<len;i++){
 89                    var arr=new Array();
 90                    for(j=0;j<blank.length;j++){
 91                        arr.push(blank[j]);    
 92                    }
 93                    if(last)arr.push(true);
 94                    else arr.push(false);
 95                    //alert(arr);
 96                    formatNode((i+1==len)?true:false,_niArr[level][ni.childID[i]],arr);
 97                }
 98            }
 99        }
100    }
101    //返回对应于父节点的子节点ID
102    function getChildID(id){
103        var level=getLevel(id);
104        var ni=new NodeInfo();
105        
106        if(_niArr[level]){//如果不是第一次到达这个层次
107            if(level==1){//如果level=1
108                ni.id=id + _niArr[1].length;
109                ni.parentID=0;
110                //
111                _niArr[0][0].childID.push(_niArr[1].length);
112                
113                _niArr[1].push(ni);
114            }else{//如果时在level不为1
115                for(var i=0;i<_niArr[level-1].length;i++){
116                    if(id==_niArr[level-1][i].id){
117                        ni.parentID=i;
118                        _niArr[level-1][i].childID.push(_niArr[level].length);
119                        ni.id=id + _niArr[level-1][i].childID.length;
120                        _niArr[level].push(ni);
121                        break;
122                    }
123                }
124            }
125        }else{//如果是第一次达到这个层次
126            //如果是创建level=1的层
127            if(level==1){
128                ni.id=id + "0";
129                ni.parentID=0;
130                //创建树的跟节点
131                var rootni=new NodeInfo();
132                rootni.id=id;
133                rootni.childID.push(0);
134                rootni.parentID=-1;
135                _niArr.push(new Array(rootni));
136                
137                _niArr.push(new Array(ni));
138                //writeAll();
139            }else{//如果不是在level>1时创建新层
140                ni.id=id + "0";
141                ni.parentID=id;
142                for(var i=0;i<_niArr[level-1].length;i++){
143                    if(id==_niArr[level-1][i].id){
144                        ni.parentID=i;
145                        _niArr[level-1][i].childID.push(0);
146                        _niArr.push(new Array(ni));
147                        break;
148                    }
149                }
150            }
151        }
152        return ni.id;
153    }
154    //展开子节点
155    function expandChild(ni,last){
156        var level=getLevel(ni.id);
157        //alert(level + ":" + $(ni.id).innerHTML);
158        if(ni.expand){
159            for(var i=0;i<ni.childID.length;i++){
160                $(_niArr[level][ni.childID[i]].id).style.display="none";
161            }
162            //var obj=$(ni.id).firstChild;
163            var obj=$(ni.id).childNodes[level-2];
164            if(last)
165                obj.src="Images/Lplus.gif";
166            else
167                obj.src="Images/Tplus.gif";
168            obj.nextSibling.src="Images/folder.gif";
169            ni.expand=false;
170        }else{
171            for(var i=0;i<ni.childID.length;i++){
172                $(_niArr[level][ni.childID[i]].id).style.display="";
173            }
174            var obj=$(ni.id).childNodes[level-2];
175            if(last)
176                obj.src="Images/Lminus.gif";
177            else
178                obj.src="Images/Tminus.gif";
179            obj.nextSibling.src="Images/folder2.gif";
180            ni.expand=true;
181        }
182    }
183    
184    //返回节点的深度
185    function getLevel(id){
186        return id.length-_conid.length + 1;
187    }
188    
189    //返回节点的标志
190
191    function getTag(level,order){
192        
193    }
194    
195    //显示子节点
196    function showChild(obj){
197        obj.src=(obj.src.indexOf("plus")!=-1)?obj.src.replace("plus","subs"):obj.src.replace("subs","plus");
198        var level=obj.parentNode.id.length-_conid.length;
199        for(var i=0;i<_idArr[level].length;i++){
200            if(_idArr[level][i][0].indexOf(obj.parentNode.id)!=-1)
201                $(_idArr[level][i][0]).style.display=($(_idArr[level][i][0]).style.display=="")?"none":"";
202        }
203        //var child=$(obj.parentNode.id + "0");
204        //child.style.display=(child.style.display=="")?"none":"";
205    }
206    
207    //节点信息封装类
208    var NodeInfo=function(){
209        this.id=new String();
210        this.childID=new Array();
211        this.parentID=new Number();
212        this.expand=false;
213    }
214}
215
216

上面的代码还有两个函数需要在外部写出来

 1var isIE;
 2
 3var browser = navigator.appName;
 4if(browser.indexOf("Microsoft")!=-1 && !window.opera) isIE=true;
 5else isIE=false;
 6//alert(browser);
 7
 8//获取id对应的对象
 9function $(id)
10{
11    return document.getElementById(id);    
12}
13

调用起来很方便

 1<link type="text/css" rel="stylesheet" href="SysComCss/Tree.css" />
 2<link type="text/css" rel="stylesheet" href="SysComCss/ComForm.css" />
 3<script language="javascript" type="text/javascript" src="SysComJS/Com.js"></script>
 4<script language="javascript" type="text/javascript" src="SysComJS/Tree.js"></script>
 5<script language="javascript" type="text/javascript">
 6 window.onload=function(){
 7  var t=new Tree("divRoot");
 8  t.setRoot("待办事宜");
 9  t.setRoot("日程安排");
10  t.setRoot("任务安排");
11  var sm=t.setRoot("短消息");
12  t.addChild(sm.id,"已收到");
13  t.addChild(sm.id,"已发送");
14  t.stopAdd();
15 }
16</script>
17</head>
18
19<body>
20 <div id="divRoot"></div>
21</body>
22
23

最后来看看效果