您的位置: 首页 > 文章 > Ajax实现无刷新树 Ajax实现无刷新树 分类: 文章 • 2024-06-08 15:07:22 1.建立一个aspx页面html代码 <html xmlns="http://www.w3.org/1999/xhtml" ><head id="Head1" runat="server"> <title>小山</title> <link type="text/css" href="../../Styles/tree_css/tree.css" rel="stylesheet"></head><body> <form id="Form1" runat="server"> <table width=100% cellpadding=0 cellspacing=0 border=0> <colgroup> <col width=180 /> <col /> </colgroup> <tr> <td> <div class="TreeMenu" id="CategoryTree" style="width: 100%; height: 489px"> </div> </td> <td> <iframe id=furl height=20 style="height: 497px; width: 100%;"></iframe> </td> </tr> </table> <script language="jscript"> function el(id) { return document.getElementById(id); } function ExpandSubCategory(iCategoryID) { var li_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); } function GetSubCategory_callback(response) { var dt = response.value.Tables[0]; if (dt.Rows.length > 0) { var iCategoryID = dt.Rows[0].FatherID; } var li_father = el("li_" + iCategoryID); var ul = document.createElement("ul"); for (var i = 0;i < dt.Rows.length;i++) { if (dt.Rows[i].IsChild == 1) //叶子节点 { var li = document.createElement("li"); li.className = "Child"; li.id = "li_" + dt.Rows[i].CategoryID; var img = document.createElement("img"); img.id = dt.Rows[i].CategoryID; img.className = "s"; img.src = "../../Styles/tree_css/s.gif"; var a = document.createElement("a"); var id = dt.Rows[i].CategoryID; a.onmouseover = function() { PreviewImage(id); }; a.href = "javascript:OpenDocument('" + dt.Rows[i].CategoryID + "');"; a.innerHTML = dt.Rows[i].CategoryName; } else { var li = document.createElement("li"); li.className = "Closed"; li.id = "li_" + dt.Rows[i].CategoryID; var img = 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 = "展开/折叠"; var a = 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); } // 叶子节点的单击响应函数 function OpenDocument(iCategoryID) { // 预加载信息 PreloadFormUrl(iCategoryID); } function PreviewImage(iCategoryID) { } function ChangeStatus(iCategoryID)
