您的位置: 首页 > 文章 > Ajax实现无刷新树 Ajax实现无刷新树 分类: 文章 • 2024-06-08 15:07:40 1.建立一个aspx页面html代码 <htmlxmlns="http://www.w3.org/1999/xhtml"><headid="Head1"runat="server"><title>小山</title><linktype="text/css"href="../../Styles/tree_css/tree.css"rel="stylesheet"></head><body><formid="Form1"runat="server"><tablewidth=100%cellpadding=0cellspacing=0border=0><colgroup><colwidth=180/><col/></colgroup><tr><td><divclass="TreeMenu"id="CategoryTree"style="width:100%;height:489px"></div></td><td><iframeid=furlheight=20style="height:497px;width:100%;"></iframe></td></tr></table><scriptlanguage="jscript">functionel(id){returndocument.getElementById(id);}functionExpandSubCategory(iCategoryID){varli_father=el("li_"+iCategoryID);if(li_father.getElementsByTagName("li").length>0)//分类已下载{ChangeStatus(iCategoryID);return;}li_father.className="Opened";switchNote(iCategoryID,true);AjaxMethod.GetSubCategory(iCategoryID,GetSubCategory_callback);}functionGetSubCategory_callback(response){vardt=response.value.Tables[0];if(dt.Rows.length>0){variCategoryID=dt.Rows[0].FatherID;}varli_father=el("li_"+iCategoryID);varul=document.createElement("ul");for(vari=0;i<dt.Rows.length;i++){if(dt.Rows[i].IsChild==1)//叶子节点{varli=document.createElement("li");li.className="Child";li.id="li_"+dt.Rows[i].CategoryID;varimg=document.createElement("img");img.id=dt.Rows[i].CategoryID;img.className="s";img.src="../../Styles/tree_css/s.gif";vara=document.createElement("a");varid=dt.Rows[i].CategoryID;a.onmouseover=function(){PreviewImage(id);};a.href="javascript:OpenDocument('"+dt.Rows[i].CategoryID+"');";a.innerHTML=dt.Rows[i].CategoryName;}else{varli=document.createElement("li");li.className="Closed";li.id="li_"+dt.Rows[i].CategoryID;varimg=document.createElement("img");img.id=dt.Rows[i].CategoryID;img.className="s";img.src="../../Styles/tree_css/s.gif";img.onclick=function(){ExpandSubCategory(this.id);};img.alt="展开/折叠";vara=document.createElement("a");a.href="javascript:ExpandSubCategory("+dt.Rows[i].CategoryID+");";a.innerHTML=dt.Rows[i].CategoryName;}li.appendChild(img);li.appendChild(a);ul.appendChild(li);}li_father.appendChild(ul);switchNote(iCategoryID,false);}//叶子节点的单击响应函数functionOpenDocument(iCategoryID){//预加载信息PreloadFormUrl(iCategoryID);}functionPreviewImage(iCategoryID){}functionChangeStatus(iCategoryID){varli_father=el("li_"+iCategoryID);if(li_father.className=="Closed"){li_father.className="Opened";}else{li_father.className="Closed";}}functionswitchNote(iCategoryID,show){varli_father=el("li_"+iCategoryID);if(show){varul=document.createElement("ul");ul.id="ul_note_"+iCategoryID;varnote=document.createElement("li");note.className="Child";varimg=document.createElement("img");img.className="s";img.src="../../Styles/tree_css/s.gif";vara=document.createElement("a");a.href="javascript:void(0);";a.innerHTML="请稍候";note.appendChild(img);note.appendChild(a);ul.appendChild(note);li_father.appendChild(ul);}else{varul=el("ul_note_"+iCategoryID);if(ul){li_father.removeChild(ul);}}}//加载根节点vartree=el("CategoryTree");varroot
