Ajax实现无刷新树

最新推荐文章于 2017-07-18 14:58:01 发布

iteye_11848

最新推荐文章于 2017-07-18 14:58:01 发布

阅读量122

点赞数

文章标签： Ajax CSS JavaScript XHTML HTML ViewUI

本文介绍了一个ASPX页面的HTML结构，并展示了如何通过JavaScript实现页面元素的动态加载及子分类信息的获取。该页面包含一个树形菜单用于导航，并使用AJAX技术来异步加载子分类。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.建立一个aspx页面
html代码

<htmlxmlns="http://www.w3.org/1999/xhtml">

<headid="Head1"runat="server">

<linktype="text/css"href="../../Styles/tree_css/tree.css"rel="stylesheet">

</head>

<body>

<formid="Form1"runat="server">

<tablewidth=100%cellpadding=0cellspacing=0border=0>

<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