首頁 > 開發者 > ASP

ASP.NET Ajax實現無重新整理樹

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

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)
　　　　　　 {
　　　　　　　　 var li_father = el("li_" + iCategoryID);
　　　　　　　　 if (li_father.className == "Closed")
　　　　　　　　 {
　　　　　　　　　　 li_father.className = "Opened";
　　　　　　　　 }
　　　　　　　　 else
　　　　　　　　 {
　　　　　　　　　　 li_father.className = "Closed";
　　　　　　　　 }
　　　　　　 }

　　　　　　 function switchNote(iCategoryID, show)
　　　　　　 {
　　　　　　　　 var li_father = el("li_" + iCategoryID);
　　　　　　　　 if (show)
　　　　　　　　 {
　　　　　　　　　　 var ul = document.createElement("ul");
　　　　　　　　　　 ul.id = "ul_note_" + iCategoryID;
　　　　　　　　　　 var note = document.createElement("li");
　　　　　　　　　　 note.className = "Child";
　　　　　　　　　　 var img = document.createElement("img");
　　　　　　　　　　 img.className = "s";
　　　　　　　　　　 img.src = "../../Styles/tree_css/s.gif";
　　　　　　　　　　 var a = document.createElement("a");
　　　　　　　　　　 a.href = "javascript:void(0);";
　　　　　　　　　　 a.innerHTML = "請稍候";
　　　　　　　　　　 note.appendChild(img);
　　　　　　　　　　 note.appendChild(a);
　　　　　　　　　　 ul.appendChild(note);
　　　　　　　　　　 li_father.appendChild(ul);
　　　　　　　　 }
　　　　　　　　 else
　　　　　　　　 {
　　　　　　　　　　 var ul = el("ul_note_" + iCategoryID);
　　　　　　　　　　 if (ul)
　　　　　　　　　　 {
　　　　　　　　　　　　 li_father.removeChild(ul);
　　　　　　　　　　 }
　　　　　　　　 }
　　　　　　 }

　　　　　　 // 載入根節點
　　　　　　 var tree = el("CategoryTree");
　　　　　　 var root = document.createElement("li");
　　　　　　 root.id = "li_0";
　　　　　　 tree.appendChild(root);
　　　　　　 // 載入頁面時顯示第一級分類
　　　　　　 ExpandSubCategory(0);
　　　　　　 function PreloadFormUrl(iCategoryID)
　　　　　　 {
　　　　　　　　 // 採用同步調用的方式擷取圖片的資訊
　　　　　　　　 var ds = AjaxMethod.GetFormsList(iCategoryID).value;
　　　　　　　　 // 如果返回了結果
　　　　　　　　 if (ds)
　　　　　　　　 {
　　　　　　　　　　 // 判斷資料表是否不為空白
　　　　　　　　　　 if (ds.Tables[0].Rows.length > 0)
　　　　　　　　　　 {
　　　　　　　　　　　　 // 返回的資訊資料表
　　　　　　　　　　　　 dt = ds.Tables[0];
　　　　　　　　　　　　 el("furl").src = dt.Rows[0].FormUrl;
　　　　　　　　　　 }
　　　　　　　　　　 else // 分類下沒有
　　　　　　　　　　 {
　　　　　　　　　　 }
　　　　　　　　 }
　　　　　　 }
　　　　　　 </script>
　　 </form>
</body>
</html>

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More