dTree無限級目錄樹和JQuery同步ajax請求

elim1發表於2011-05-17
jQuery

以前都是用JQuery對樹的支援來實現目錄樹的，近來閒來無事就弄了下dTree，感覺其無限級目錄還是挺好的，而且它的使用也比較方便，基本上就是先把要用的js檔案即dtree.js和css檔案dtree.css引入，另外就是它預設的圖片，當然這些圖片都是可以自己指定的，它的css樣式也可以自己改變的！

 

關於dTree就先談談它的node，dTree的node的構造方法可以指定下列引數，

			id //唯一標識，數字型
			pid//父節點的id，如果是根結點那就只能是-1，一般來講只有一個最頂層的根結點 
			name//結點的名字，字串型別，在頁面上顯示出來的標籤. 
			url//字串型別，表示當點選該葉子結點的時候訪問哪個URL. 
			title//title,字串型別，滑鼠進入時顯示的字串. 
			target//字串型別，超連結的目標位置. 
			icon //字串型別，表示該結點圖示的圖片路徑，不指定則使用預設的
			iconOpen//結點開啟時候的圖片路徑，不指定則使用預設的 
			open//boolean型別，表示初始狀態是否是開啟的

 如：

mytree.add(1, 0, `My node`, `node.html`, `node title`, `mainframe`, `img/musicfolder.gif`);

 

 

有了node以後就是構建樹了

//引入了dtree.js後，就可以使用new dTree()了
myTree = new dTree();//這樣就新建了一個dTree了，
//新建了dTree以後就是把剛建的node給添進去了，
mytree.add(1, 0, `My node`, `node.html`, `node title`, `mainframe`, `img/musicfolder.gif`);

 

在最後還可以指定一些配置引數：

 

			target//所有結點的目標 
			folderLinks//非葉子結點是否也是可以連結的，預設是true 
			useSelection//結點是否可以被選擇，預設true. 
			useCookies//是否使用cookies來記錄當前樹的狀態，預設是true 
			useLines//是否用線來畫樹，預設是true 
			useIcons//是否使用圖示來構建樹，預設是true 
			useStatusText//是否在狀態列顯示結點的名字，而不是在URL的位置顯示，預設是false
			closeSameLevel//是否同時只能有一個資料夾處於開啟狀態，預設為false，當為true的時候關閉所有的資料夾和開啟所有的資料夾將不會起作用
			inOrder//是否先新增父結點再新增子節點，  預設為false，為true可以加快載入速度
			
			//例如:
			mytree.config.target = "mytarget";

 

像這些結點的相關資訊，我們一般都是要從後臺來得到的，或者從資料庫，或者從配置檔案，如果加上覆雜的許可權控制就得每次都到後臺取一次了，
  而從後臺得到這些資料的話一般常用的是以ajax請求取得json格式的資料，然後在頁面上就可以非常方便的使用了，但是使用ajax請求的時候
  就會有一個問題出現了，那就是一般的ajax請求都是非同步的，這時候，頁面不會等ajax的請求返回就已經往下面執行了，等ajax請求返回的時候
  頁面已經不能再使用其返回的資料進行操作了，所以這個時候需要使用ajax的同步請求了！ajax的同步請求很簡單隻要在ajax的請求的時候加上一個
  區別於ajax請求型別的引數就行了，一般都是async，像JQuery的用法就是這樣的：

$.ajax( {
				url : "module/geneMenu",
				async : false//同步，等這個請求完成後才繼續往下執行,這樣myTree才能使用返回來的資料
			});

 使用了ajax的同步請求以後，頁面在解析到ajax請求的時候就會等ajax請求返回以後再繼續往下面執行，這樣就可以利用
  ajax的返回值來進行對dTree的node的操作了！

 

還有一個問題就是我們常常會利用Frame來將頁面進行佈局成左邊是menu欄，而右邊是主頁面，上邊是一些基本資訊這樣的結構
  這樣我們就需要在點選menu欄的葉子結點時，在mainFrame裡面顯示請求返回後的內容，其實要實現這個要求挺簡單的，只需要
  把node的target指定為mainFrame的name即可

 

下面是一段完整的程式碼：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>
		<title>menu</title>

		<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
		<meta http-equiv="description" content="this is my page">
		<meta http-equiv="content-type" content="text/html; charset=UTF-8">

		<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
		<link rel="stylesheet" type="text/css" href="css/dtree.css">
		<style type="text/css">
			html,body {
				background:#afa;
			}
		</style>
		<script type="text/javascript" src="js/dtree.js"></script>
		<script type="text/javascript" src="js/jquery.js"></script>
	</head>

	<body>
		<div>
		<script type="text/javascript">
		
			myTree = new dTree(`myTree`);
			$.ajax( {
				url : "module/geneMenu",
				async : false,//同步，等這個請求完成後才繼續往下執行,這樣myTree才能使用返回來的資料
				dataType: "json",
				success: function(myData) {
					for ( var i = 0; i < myData.length; i++) {
						var obj = myData[i];
						//right是window.parent的一個frame的name
						myTree.add(obj.id, obj.parentId, obj.name, obj.url, obj.name, "right");
					}
					document.write(myTree);
				}
			});
			myTree.config.target = "right";//right是window.parent的一個frame的name
			myTree.config.useCookies = false;
			myTree.config.inOrder = true;
			
		</script>
		</div>
	</body>
</html>

 

 


相關文章