Web页面中动态目录树的生成

一、为什么需要动态显示的目录树
       由于用目录树显示数据层次性强,在web页面中目录树的使用可以说是随处可见.其实现方法也有好几种.
       方案一.  我们可以直接去msdn去下载webcontrol包,里面包含了一个TreeView控件,它是一个web的服务器端控件,添加引用之后,就可以直接添加到页面中了,开发起来也很简单,数据既可以直接添加,也可以通过数据绑定动态添加,但是它的缺点也很明显:由于每次显示时,它把需要显示的数据全部都加载,如果数据量很大的话,效率可想而知.
     方案二.  我们也可以用javascript编写,然后用css控制它的样式,由于javascript是在客户端运行的,这种方案实现的目录树减轻了服务器的负担,但是显示的数据不能动态绑定.
     试想一个这样的应用环境:我们需要把上万个文件夹和文件用一个目录树加载,文件夹中可以包含多个目录和文件,而这些文件夹和文件的信息都保存在数据库中,我们该怎么做?方案一和方案二显然都行不通,这时我们可以先把第一层目录加载在页面中显示出来(不是全部加载),其它的目录和文件就按需显示,即什么时候用户请求显示,内容什么时候加载.

二、如何实现
　在客户端
JavaScript代码:

1. function InsertChildTree1(str,o)
   
2. {
   
3. if(o==null || o.parentNode==null || str==null)
   
4.              {
   
5. alert("Error.  [3000] object expected!");
   
6. return;
   
7. }
   
8. 
   
9. if(o.parentNode.className=="Closed")return;
   
10. if(o.IsLoad)
    
11. {
    
12.    if(o.IsLoad=="1")return;
    
13. }
    
14. 
    
15. var response=TreeData.InsertTreeData(str);
    
16. var ds=response.value;
    
17. if(ds != null && typeof(ds) == "object" && ds.Tables != null)
    
18. {
    
19. 
    
20.   for(var i=0;i<ds.Tables[0].Rows.length;i++)
    
21.    {  
    
22.     var oNewList=document.createElement("ul");
    
23.       o.parentNode.appendChild(oNewList);
    
24.       var oNewNode = document.createElement("li");
    
25.       oNewList.appendChild(oNewNode);
    
26.       oNewNode.className="Closed";
    
27.        var oNodeImg=document.createElement("img");
    
28.       
    
29.       oNodeImg.setAttribute("IsLoad","0");
    
30.       
    
31.       var strPath;
    
32.       var subCount=ds.Tables[0].Rows[i].NodeCount;
    
33.       
    
34.      strPath=ds.Tables[0].Rows[i].NodePath;
    
35.       oNodeImg.setAttribute("strPath",strPath);
    
36.       oNodeImg.className="s";
    
37.      oNewNode.appendChild(oNodeImg);
    
38.      
    
39.     if(subCount>0)
    
40.      {
    
41.       oNodeImg.onclick=function(){ChangeStatus(this);InsertChildTree1(this.strPath,this);this.IsLoad="1";};
    
42.       oNodeImg.src="css/s.gif";
    
43.      }
    
44.      else
    
45.      {
    
46.      oNodeImg.src="css/s.gif";
    
47.      oNodeImg.parentNode.className="Child";
    
48.      }
    
49.       
    
50.       
    
51.      var oNodeHref=document.createElement("a");
    
52.       oNodeHref.setAttribute("strPath",strPath);
    
53.       
    
54.         oNodeHref.setAttribute("href","#");
    
55.       oNodeHref.onclick=function(){ViewFolder(this.strPath);};
    
56.       
    
57.       oNodeHref.innerText=ds.Tables[0].Rows[i].NodeText;
    
58.        if(subCount<0)subCount=0;
    
59.          oNodeHref.setAttribute("title","此目录下共有"+subCount+"个子文件夹");
    
60.    
    
61.       oNewNode.appendChild(oNodeHref);
    
62.       
    
63.     }
    
64.       
    
65. }
    
66. else
    
67. {
    
68. alert("Error. [3001] " + response.request.responseText);
    
69. }
    
70. 
    
71. }
    
72. 
    
73. 
    
74. function write(o)
    
75. {
    
76. if(typeof(o.request)!="object")return;
    
77. 
    
78. if(o.request.readyState==1   && o.request!=null)
    
79. {
    
80. alert("ffff");
    
81. 
    
82. }
    
83. else
    
84. {
    
85.   return;
    
86. }
    
87. }
    
88. 
    
89. //添加子树
    
90. function InsertChildTree(o)
    
91. {
    
92. 
    
93. if(o.className=="Closed"  )
    
94. 
    
95. if(o.IsLoad)
    
96. {
    
97. if(o.IsLoad=="1")return;
    
98. }
    
99. 
    
100. 
     
101. var response=TreeData.InitTreeData1();
     
102. 
     
103.   write(response);
     
104. var ds = response.value;
     
105. if(ds != null<%2

复制代码