純ajax＋sqlserver無限級樹形選單．
阿新 • • 發佈：2019-01-29
ajax這個當今流行的技術名詞,幾年前ajax開始流行時,也花過點時間研究了一下ajax.net控制元件．只是工作原因，一直沒有用到專案中去．一晃幾年ajax依舊如火如荼．最近閒來無事，重溫ajax．就好象AJAX當初被遺棄，現在又被熱捧一樣．這次我沒有去下載ajax.net,altas等控制元件．而是從ajax基礎看起，呵呵，一種一切從頭開始開始感覺．反正是閒來無事．．
ibm 中國開發區翻譯的＜掌握 Ajax 系列＞幾篇文章寫的不錯．想了解ajax的基礎朋友可以去看看．
進入主題吧．做過web開發的朋友,一定都收藏了javascrip樹形選單，我也有．javascript樹形選單和我這次寫的ajax樹形選單最大不同點是ajax樹形選單不是一次性將選單的全部資料提出來．而是當點了節點時才去從資料庫中讀取該節點的子樹資訊，再載入到DIV標籤中，而javascript是一次性將資料全部讀出來．兩者的相同點就是顯示子樹時，都不會重新整理頁面．效果圖如下:
現實步驟:
1、新建表，並在表中新增資料。這裡要注意的是，樹形選單的資料都是從這個表中讀出來，表結構設計要做到無限級。
CREATETABLE[dbo].[SysBaseData]([BaseDataID][int]NOTNULL,
[BaseDataCode][char](10) NOTNULL,
[BaseDataName][varchar](30) NOTNULL,
[ParentCode][char](10) NOTNULL,
[Description][varchar](100) NULL,
[LevelType][int]NOTNULL,
[
[PathCode][varchar](100) NULL,
[SerialNumberID][int]NOTNULL,
CONSTRAINT[PK_SysBaseData]PRIMARYKEYNONCLUSTERED
(
[BaseDataID]ASC
)WITH (PAD_INDEX =OFF, STATISTICS_NORECOMPUTE =OFF, IGNORE_DUP_KEY =OFF, ALLOW_ROW_LOCKS =ON, ALLOW_PAGE_LOCKS =ON) ON[PRIMARY]
) ON[PRIMARY
2、新建樹形選單顯示檔案LeftTreeAjax.html。
(1)createXMLHttpRequest()建立xnlHttp物件，由於不同的瀏覽器XMLHttpRequest控制元件名不同。程式碼種用了幾個try。這樣幾種主流的瀏覽器都可以相容呢。
//建立物件function createXMLHttpRequest()
{
var isRight =true;
try{ xmlHttp =new XMLHttpRequest(); }
catch(trymicrosoft) { try{xmlHttp =new ActiveXobject("Msxml2.XMLHTTP");} catch(othermicrosoft) { try{xmlHttp =new ActiveXobject("Microsoft.XMLHTTP");} catch(failed) { isRight =false;
} } } if(!isRight) alert("XML物件建立失敗");
}
(2) GetData(ID) 單擊節點時，呼叫該函式。該函式傳送請求給CreateTreeAjax.aspx．
//獲取資料function GetData(ID){
ParID = document.getElementById("M1_"+ ID);
ShowID = document.getElementById("M2_"+ ID);
if(ShowID.innerHTML !="")
{
if(ShowID.style.display =="none")
ShowID.style.display ="block";
else
ShowID.style.display ="none";
ShowFolderICO();
return;
}
ShowID.style.display ="block";
ShowID.innerHTML ="<span class="load">Loading Tree ……</span>";
var Url ="CreateTreeAjax.aspx?ID="+ ID;
createXMLHttpRequest();
xmlHttp.onreadystatechange = ShowTree;
xmlHttp.open("GET", Url, true);
xmlHttp.send(null);
}
(3)ShowTree() 顯示子樹，CreateTreeAjax.aspx反回子樹資訊，ShowTree() 獲取資訊，並載入到DIV標籤中．
//此方法直接從伺服器端返回HTMLfunction ShowTree(){
if (xmlHttp.readyState ==4){
if (xmlHttp.status ==200)
{
ShowID.innerHTML = xmlHttp.responseText;
// alert(xmlHttp.responseText); ShowFolderICO();
//alert(M1_DCCK.innerHTML); }else
{
ShowID.innerHTML ="資料獲取錯誤！"+xmlHttp.status;
}
}
}