请问，怎么样用Javascript来解决建树的问题，要建三层以上的树，只要静态就行，不用从数据库加载

 1<script language="JavaScript">   
 2var strStyle='<style type="text/css">'   
 3strStyle+='span.SelectIng{color:#ff00ff;border:solid 1pt #666666;padding:0.5pt;height:4px;background-color:#cccccc;}'   
 4strStyle+='span.NoSelect{color:#000084;border:solid 1pt #ffffff;padding:0.5pt;height:4px;background-color:#ffffff;}'   
 5strStyle+='span.SelectEd{color:#D02090;border:solid 1pt #888888;padding:0.5pt;height:4px;background-color:#f3f3f3;}'   
 6strStyle+='</style>'   
 7document.write(strStyle)   
 8  
 9var myRs=new Array(), selectItem;   
10function compare(a,b) {return parseInt(a[1]) - parseInt(b[1])}   
11function InsertItem(s){myRs[myRs.length++] = s.split(/,/);}   
12  
13function ExCloAll(n){   
14var d=document.all('0'), e=d.all.tags('div')   
15for (i=0;i<e.length;i++)e[i].style.display=(n==1?'block':'none')   
16e=d.all.tags('p')   
17for (i=0;i<e.length;i++){if(ChkExist(e[i].children[1].value))e[i].children[0].innerText=(n==1?'- ':'+ ')}   
18}   
19  
20function ExCloItem(){   
21var c,e=event.srcElement, p=e.parentElement.children   
22if(selectItem!=null)selectItem.className='NoSelect';   
23e.className='SelectEd'   
24selectItem=event.srcElement;   
25if(c=document.all(e.value)){   
26p[0].innerText=(p[0].innerText=='+ '?'- ':'+ ')   
27c.style.display=(c.style.display=='none'?'block':'none')   
28}else{p[0].innerText='- '}   
29}   
30function ExCloItem2(){   
31var c,e=event.srcElement, p=e.parentElement.children   
32if(c=document.all(p[1].value)){   
33e.innerText=(e.innerText=='+ '?'- ':'+ ')   
34c.style.display=(c.style.display=='block'?'none':'block')   
35}else e.innerText='- '   
36}   
37  
38function OutItem(){   
39var e=event.srcElement   
40if(selectItem != '')e.className=(selectItem==e?'SelectEd':'NoSelect')   
41else e.className='NoSelect'   
42}   
43  
44function ChkExist(n){   
45n=parseInt(n)   
46if((n<myRs[0][1]) ¦ ¦(n>myRs[myRs.length-1][1]))return false   
47var a,b,c,x=0, y=parseInt(myRs.length/2), z=myRs.length-1   
48while((x!=y)&&(y!=z)){   
49a=myRs[x][1], b=myRs[y][1], c=myRs[z][1]   
50if(n==a ¦ &brvbarn==b ¦ &brvbarn==c)return true   
51if(n>b)x=y;   
52else z=y;y=parseInt(x+z);   
53y=parseInt((x+z)/2);   
54}   
55return false   
56}   
57  
58function drawTree(n){   
59if(n==0){   
60myRs.sort(compare)   
61document.write('<p style="font:10pt;cursor:hand;"><span onclick="ExCloAll(1)">全部展開</span>&nbsp;&nbsp;<span onclick="ExCloAll(0)">全部合攏</span></p>')   
62}   
63if (ChkExist(n)!=true)return   
64document.write('<div id="'+n+'" style="font:10pt;cursor:hand;'+(n!=0?'position:relative;left:20;display:none;':'')+'">')   
65for(var i=0;i<myRs.length;i++){   
66if (parseInt(myRs[i][1])>n)break;   
67if (myRs[i][1]==n){   
68document.write('<p style="margin:0pt;"><span style="vertical-align:top;" onclick="ExCloItem2()">'+(ChkExist(myRs[i][0])?'+ ':'- ')+'</span>')   
69document.write('<span onclick="ExCloItem()" value="'+myRs[i][0]+'" class="NoSelect" onmouseout="OutItem()" onmouseover="this.className=\'SelectIng\'">'+myRs[i][2]+'</span></p>')   
70drawTree(myRs[i][0])   
71}   
72}   
73document.write('</div>')   
74}   
75  
76InsertItem('1,0,根目錄1')   
77InsertItem('11,1,子目錄1')   
78InsertItem('111,11,孫目錄1')   
79InsertItem('1111,111,曾孫目錄')   
80InsertItem('11111,1111,玄孫目錄')   
81InsertItem('12,1,子目錄2')   
82InsertItem('2,0,根目錄2')   
83InsertItem('21,2,子目錄A')   
84InsertItem('22,2,子目錄B')   
85InsertItem('3,0,根目錄3')   
86drawTree(0)   
87</script>