小弟我在前面写的两篇文章里面，源码都只是用JS模拟了AJAX，实在没有象样的东西，在此表示歉意。
昨天写了个简单的模拟Windows文件夹的AJAX无限级菜单树，希望下载后对大家有点用处。
开发环境：VS2005、C#、.net2.0、Access、AJAX引擎是自己写的，没有用到AJAX的DLL。
运行环境：IE
具体的功能与界面如下：
tree.htm
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml" >
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=GB2312" />
5 <title>无限级联极菜单树</title>
6 <script language="javascript" type="text/javascript" src="js/Ajax.js"></script>
7 <script language="javascript" type="text/javascript">
8 <!--
9 function window.onload()
10 {
11 getdata("tree.aspx?mode=getTree&fatherID=0","divAjax");
12 }
13 -->
14 </script>
15 </head>
16 <body>
17 <div id='divAjax'></div>
18 <div id="contextmenu" style="text-align:center;border:1px solid #666666;background:#eeeeee;width:60px;padding:5px;display:none;position:absolute"></div>
19 </body>
20 </html>
21
Ajax.js
1 function $(id)
2 {
3 return document.getElementById(id);
4 }
5 function echo(obj,html)
6 {
7 $(obj).innerHTML=html;
8 }
9 function createxmlhttp()
10 {
11 var xmlhttp = false;
12 try
13 {
14 xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
15 }
16 catch (e)
17 {
18 try
19 {
20 xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
21 }
22 catch (e)
23 {
24 xmlhttp = false;
25 }
26 }
27 if (!xmlhttp && typeof XMLHttpRequest!='undefined')
28 {
29 xmlhttp = new XMLHttpRequest();
30 if (xmlhttp.overrideMimeType)
31 {
32 //设置MiME类别
33 xmlhttp.overrideMimeType('text/xml');
34 }
35 }
36 return xmlhttp;
37 }
38 //向服务器获取数据
39 function getdata(url,obj,initJS)
40 {
41 var xmlhttp = createxmlhttp();
42 xmlhttp.onreadystatechange=requestdata;
43 xmlhttp.open("GET",url,true);
44 xmlhttp.setRequestHeader("If-Modified-Since","0");
45 xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
46 xmlhttp.send(null);
47 function requestdata()
48 {
49 echo(obj,"<IMG SRC='Images/loading.gif' /> <span style=' font-size:12px; color:Black;'>loading
..</span><br>");
50 if(xmlhttp.readyState==4)
51 {
52 if(xmlhttp.status==200)
53 {
54 echo(obj,xmlhttp.responseText);
55 if(initJS != null)
56 {
57 getInitJS(initJS);
58 }
59 }
60 }
61 }
62 }
63 //向服务器发送数据
64 function postdata(url,obj,data)
65 {
66 var xmlhttp= createxmlhttp();
67 xmlhttp.onreadystatechange=requestdata;
68 xmlhttp.open("POST", url, true);
69 xmlhttp.setRequestHeader("If-Modified-Since","0");
70 xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
71 xmlhttp.send(data);
72 function requestdata()
73 {
74 echo(obj,"<IMG SRC='Images/loading.gif' /> <span style=' font-size:12px; color:Black;'>loading..</span><br>");
75 if(xmlhttp.readyState==4)
76 {
77 if(xmlhttp.status==200)
78 {
79 if(!postInitJS(xmlhttp.responseText))
80 {
81 echo(obj,xmlhttp.responseText);
82 }
83 }
84 }
85 }
86 }
87
88 function ShowSub(id,flag)
89 {
90 if(flag=="1")
91 {
92 eval("sub" + id).style.display='';
93 document.images["AddImg" + id].src='Images/subImg.bmp';
94 return;
95 }
96 if(flag=="0")
97 {
98 eval("sub" + id).style.display='none';
99 document.images["AddImg" + id].src='Images/addImg.bmp';
100 return;
101 }
102 if(eval("sub" + id).style.display=='none')
103 {
104 eval("sub" + id).style.display='';
105 document.images["AddImg" + id].src='Images/subImg.bmp';
106 return;
107 }
108 else
109 {
110 eval("sub" + id).style.display='none';
111 document.images["AddImg" + id].src='Images/addImg.bmp';
112 return;
113 }
114 }
115
116 function showMenu(id,fatherID)
117 {
118 contextmenu.style.posLeft = document.body.scrollLeft + event.x + 10 ;
119 contextmenu.style.posTop = document.body.scrollTop + event.y + 10;
120 var menuHtml = "";
121 menuHtml = menuHtml + "<span style='cursor:hand;font-size:12px; color:Black;' onmousemove=this.style.backgroundColor='#00cccc'; onmouseout=this.style.backgroundColor=''; onclick=getdata('tree.aspx?mode=getAdd&fatherID=" + fatherID + "','add" + fatherID + "','addFocus" + fatherID + "');closeMenu(); >添加同级</span><br />";
122 menuHtml = menuHtml + "<span style='cursor:hand;font-size:12px; color:Black;' onmousemove=this.style.backgroundColor='#00cccc'; onmouseout=this.style.backgroundColor=''; onclick=getdata('tree.aspx?mode=addSub&id=" + id + "','addSub" + id + "','getTree" + id + "');closeMenu(); >添加子级</span><br />";
123 menuHtml = menuHtml + "<span style='cursor:hand;font-size:12px; color:Black;' onmousemove=this.style.backgroundColor='#00cccc'; onmouseout=this.style.backgroundColor=''; onclick=getdata('tree.aspx?mode=getEdit&id=" + id + "','edit" + id + "','editFocus" + id + "');closeMenu(); >修 改</span><br />";
124 menuHtml = menuHtml + "<span style='cursor:hand;font-size:12px; color:Black;' onmousemove=this.style.backgroundColor='#00cccc'; onmouseout=this.style.backgroundColor=''; onclick=closeMenu();if(confirm('你确定要删除此菜单吗？')){postdata('tree.aspx?mode=del&id=" + id + "&fatherID=" + fatherID + "','edit" + id + "');} >删 除</span>";
125 document.getElementById('contextmenu').innerHTML = menuHtml ;
126 contextmenu.style.display = "" ;
127 }
128
129 function closeMenu()
130 {
131 contextmenu.style.display="none";
132 }
133
134 document.oncontextmenu=function()
135 {
136 return false;
137 }
138
139 document.onclick=function()
140 {
141 if(document.activeElement!=contextmenu)
142 {
143 closeMenu();
144 }
145 }
146 function getInitJS(JS)
147 {
148 if(JS.substr(0,6)=='addSub')
149 {
150 id=JS.substr(6,JS.length);
151 getdata('tree.aspx?mode=getAdd&fatherID=' + id,'add' + id,'addFocus' + id);
152 }
153 if(JS.substr(0,8)=='addFocus')
154 {
155 id=JS.substr(8,JS.length);
156 $('addName'+id).select();
157 }
158 if(JS.substr(0,9)=='editFocus')
159 {
160 id=JS.substr(9,JS.length);
161 $('editName'+id).select();
162 }
163 if(JS.substr(0,7)=='getTree')
164 {
165 id=JS.substr(7,JS.length);
166 getdata('tree.aspx?mode=getTree&fatherID=' + id,'sub' + id,'addSub' + id);
167 ShowSub(id,'1');
168 }
169 }
170 function postInitJS(JS)
171 {
172 if(JS.substr(0,5)=='added')
173 {
174 id=JS.substr(5,JS.length);
175 if(id=="0")
176 {
177 getdata("tree.aspx?mode=getTree&fatherID=0","divAjax");
178 }
179 else
180 {
181 getdata("tree.aspx?mode=getTree&fatherID=" + id,"sub" + id );
182 }
183 return true;
184 }
185 if(JS.substr(0,6)=='edited')
186 {
187 id=JS.substr(6,JS.length);
188 getdata('tree.aspx?mode=returnEdit&id=' + id,'edit' + id );
189 return true;
190 }
191 if(JS.substr(0,10)=='addNameRep')
192 {
193 id=JS.substr(10,JS.length);
194 alert('此菜单名已经存在');
195 getdata('tree.aspx?mode=getAdd&fatherID=' + id ,'add' + id ,'addFocus' + id);
196 return true;
197 }
198 if(JS.substr(0,11)=='editNameRep')
199 {
200 id=JS.substr(11,JS.length);
201 alert('此菜单名已经存在');
202 getdata('tree.aspx?mode=getEdit&id=' + id ,'edit' + id ,'editFocus' + id);
203 return true;
204 }
205 if(JS.substr(0,10)=='deletError')
206 {
207 id=JS.substr(10,JS.length);
208 alert('请先删除此菜单的子级项');
209 if(id=="0")
210 {
211 getdata("tree.aspx?mode=getTree&fatherID=0","divAjax");
212 }
213 else
214 {
215 getdata("tree.aspx?mode=getTree&fatherID=" + id,"sub" +
昨天写了个简单的模拟Windows文件夹的AJAX无限级菜单树，希望下载后对大家有点用处。
开发环境：VS2005、C#、.net2.0、Access、AJAX引擎是自己写的，没有用到AJAX的DLL。
运行环境：IE
具体的功能与界面如下：
初始菜单：
展开文件夹：
新建同级：
 |
 |
 |
新建子级：
 |
 |
修改：
 |
 |
删除：
 |
 |
右键菜单,模拟Windows失去焦点自动保存,判断是否重名，删除提示！
下面是3个程序主文件代码(Tree.htm、Tree.aspx、Ajax.js)
tree.htm1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml" >
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=GB2312" />
5 <title>无限级联极菜单树</title>
6 <script language="javascript" type="text/javascript" src="js/Ajax.js"></script>
7 <script language="javascript" type="text/javascript">
8 <!--
9 function window.onload()
10 {
11 getdata("tree.aspx?mode=getTree&fatherID=0","divAjax");
12 }
13 -->
14 </script>
15 </head>
16 <body>
17 <div id='divAjax'></div>
18 <div id="contextmenu" style="text-align:center;border:1px solid #666666;background:#eeeeee;width:60px;padding:5px;display:none;position:absolute"></div>
19 </body>
20 </html>
21
Ajax.js1 function $(id)
2 {
3 return document.getElementById(id);
4 }
5 function echo(obj,html)
6 {
7 $(obj).innerHTML=html;
8 }
9 function createxmlhttp()
10 {
11 var xmlhttp = false;
12 try
13 {
14 xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
15 }
16 catch (e)
17 {
18 try
19 {
20 xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
21 }
22 catch (e)
23 {
24 xmlhttp = false;
25 }
26 }
27 if (!xmlhttp && typeof XMLHttpRequest!='undefined')
28 {
29 xmlhttp = new XMLHttpRequest();
30 if (xmlhttp.overrideMimeType)
31 {
32 //设置MiME类别
33 xmlhttp.overrideMimeType('text/xml');
34 }
35 }
36 return xmlhttp;
37 }
38 //向服务器获取数据
39 function getdata(url,obj,initJS)
40 {
41 var xmlhttp = createxmlhttp();
42 xmlhttp.onreadystatechange=requestdata;
43 xmlhttp.open("GET",url,true);
44 xmlhttp.setRequestHeader("If-Modified-Since","0");
45 xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
46 xmlhttp.send(null);
47 function requestdata()
48 {
49 echo(obj,"<IMG SRC='Images/loading.gif' /> <span style=' font-size:12px; color:Black;'>loading
..</span><br>");50 if(xmlhttp.readyState==4)
51 {
52 if(xmlhttp.status==200)
53 {
54 echo(obj,xmlhttp.responseText);
55 if(initJS != null)
56 {
57 getInitJS(initJS);
58 }
59 }
60 }
61 }
62 }
63 //向服务器发送数据
64 function postdata(url,obj,data)
65 {
66 var xmlhttp= createxmlhttp();
67 xmlhttp.onreadystatechange=requestdata;
68 xmlhttp.open("POST", url, true);
69 xmlhttp.setRequestHeader("If-Modified-Since","0");
70 xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
71 xmlhttp.send(data);
72 function requestdata()
73 {
74 echo(obj,"<IMG SRC='Images/loading.gif' /> <span style=' font-size:12px; color:Black;'>loading
..</span><br>");75 if(xmlhttp.readyState==4)
76 {
77 if(xmlhttp.status==200)
78 {
79 if(!postInitJS(xmlhttp.responseText))
80 {
81 echo(obj,xmlhttp.responseText);
82 }
83 }
84 }
85 }
86 }
87
88 function ShowSub(id,flag)
89 {
90 if(flag=="1")
91 {
92 eval("sub" + id).style.display='';
93 document.images["AddImg" + id].src='Images/subImg.bmp';
94 return;
95 }
96 if(flag=="0")
97 {
98 eval("sub" + id).style.display='none';
99 document.images["AddImg" + id].src='Images/addImg.bmp';
100 return;
101 }
102 if(eval("sub" + id).style.display=='none')
103 {
104 eval("sub" + id).style.display='';
105 document.images["AddImg" + id].src='Images/subImg.bmp';
106 return;
107 }
108 else
109 {
110 eval("sub" + id).style.display='none';
111 document.images["AddImg" + id].src='Images/addImg.bmp';
112 return;
113 }
114 }
115
116 function showMenu(id,fatherID)
117 {
118 contextmenu.style.posLeft = document.body.scrollLeft + event.x + 10 ;
119 contextmenu.style.posTop = document.body.scrollTop + event.y + 10;
120 var menuHtml = "";
121 menuHtml = menuHtml + "<span style='cursor:hand;font-size:12px; color:Black;' onmousemove=this.style.backgroundColor='#00cccc'; onmouseout=this.style.backgroundColor=''; onclick=getdata('tree.aspx?mode=getAdd&fatherID=" + fatherID + "','add" + fatherID + "','addFocus" + fatherID + "');closeMenu(); >添加同级</span><br />";
122 menuHtml = menuHtml + "<span style='cursor:hand;font-size:12px; color:Black;' onmousemove=this.style.backgroundColor='#00cccc'; onmouseout=this.style.backgroundColor=''; onclick=getdata('tree.aspx?mode=addSub&id=" + id + "','addSub" + id + "','getTree" + id + "');closeMenu(); >添加子级</span><br />";
123 menuHtml = menuHtml + "<span style='cursor:hand;font-size:12px; color:Black;' onmousemove=this.style.backgroundColor='#00cccc'; onmouseout=this.style.backgroundColor=''; onclick=getdata('tree.aspx?mode=getEdit&id=" + id + "','edit" + id + "','editFocus" + id + "');closeMenu(); >修 改</span><br />";
124 menuHtml = menuHtml + "<span style='cursor:hand;font-size:12px; color:Black;' onmousemove=this.style.backgroundColor='#00cccc'; onmouseout=this.style.backgroundColor=''; onclick=closeMenu();if(confirm('你确定要删除此菜单吗？')){postdata('tree.aspx?mode=del&id=" + id + "&fatherID=" + fatherID + "','edit" + id + "');} >删 除</span>";
125 document.getElementById('contextmenu').innerHTML = menuHtml ;
126 contextmenu.style.display = "" ;
127 }
128
129 function closeMenu()
130 {
131 contextmenu.style.display="none";
132 }
133
134 document.oncontextmenu=function()
135 {
136 return false;
137 }
138
139 document.onclick=function()
140 {
141 if(document.activeElement!=contextmenu)
142 {
143 closeMenu();
144 }
145 }
146 function getInitJS(JS)
147 {
148 if(JS.substr(0,6)=='addSub')
149 {
150 id=JS.substr(6,JS.length);
151 getdata('tree.aspx?mode=getAdd&fatherID=' + id,'add' + id,'addFocus' + id);
152 }
153 if(JS.substr(0,8)=='addFocus')
154 {
155 id=JS.substr(8,JS.length);
156 $('addName'+id).select();
157 }
158 if(JS.substr(0,9)=='editFocus')
159 {
160 id=JS.substr(9,JS.length);
161 $('editName'+id).select();
162 }
163 if(JS.substr(0,7)=='getTree')
164 {
165 id=JS.substr(7,JS.length);
166 getdata('tree.aspx?mode=getTree&fatherID=' + id,'sub' + id,'addSub' + id);
167 ShowSub(id,'1');
168 }
169 }
170 function postInitJS(JS)
171 {
172 if(JS.substr(0,5)=='added')
173 {
174 id=JS.substr(5,JS.length);
175 if(id=="0")
176 {
177 getdata("tree.aspx?mode=getTree&fatherID=0","divAjax");
178 }
179 else
180 {
181 getdata("tree.aspx?mode=getTree&fatherID=" + id,"sub" + id );
182 }
183 return true;
184 }
185 if(JS.substr(0,6)=='edited')
186 {
187 id=JS.substr(6,JS.length);
188 getdata('tree.aspx?mode=returnEdit&id=' + id,'edit' + id );
189 return true;
190 }
191 if(JS.substr(0,10)=='addNameRep')
192 {
193 id=JS.substr(10,JS.length);
194 alert('此菜单名已经存在');
195 getdata('tree.aspx?mode=getAdd&fatherID=' + id ,'add' + id ,'addFocus' + id);
196 return true;
197 }
198 if(JS.substr(0,11)=='editNameRep')
199 {
200 id=JS.substr(11,JS.length);
201 alert('此菜单名已经存在');
202 getdata('tree.aspx?mode=getEdit&id=' + id ,'edit' + id ,'editFocus' + id);
203 return true;
204 }
205 if(JS.substr(0,10)=='deletError')
206 {
207 id=JS.substr(10,JS.length);
208 alert('请先删除此菜单的子级项');
209 if(id=="0")
210 {
211 getdata("tree.aspx?mode=getTree&fatherID=0","divAjax");
212 }
213 else
214 {
215 getdata("tree.aspx?mode=getTree&fatherID=" + id,"sub" +