jstree的簡單解決方案

[b][size=large]jstree王者歸來[/size][/b]

[b] jstree王者歸來： QQqun 105564508 希望與各位在線交流探討[/b]
[color=red]寫在前面：[/color]

最近在項目中要用到jstree這個東西，參考了網絡上各位大家的關於jstree的學習摘要，但是大部分jstree的文章中都是引用了jstree的demo，對其沒有什麼實質的詳細闡述，希望本文能給那些和我一樣在jstree迷途中的人們打開一盞明燈；如果在以下博文中寫的有問題的話，大夥有意見請儘管提，我虛心接受。如果寫的實在不堪入目請您儘快繞道。謝謝
另外，感謝網上各位jstree大俠的指導。


[b]一、JStree的簡單介紹[/b]
1.關於jstree
jsTree 使用了 jQuery 和 Sarissa，是一個是免費的但是設置靈活的，基於 JavaScript 跨瀏覽器支持的網頁樹形部件。

jsTree 支持三種數據源頭：
預先定義好的 HTML -嵌套的列表結構
JSON
XML

jsTree 的主要功能有：

同步導入 – 只需要提供一個 URL，就會去請求數據（只適合 JSON 和 XML 數據形式）。
支持打開，關閉，重命名，創建，刪除節點（通過預先定義好的規則）
支持多種回調函數（onchange, oncreate, ondelete, onload, 等等）
支持拖拉
支持多重選擇
支持多種語言
支持主題（可以修改圖標，大小和背景等等）
可以支持動態打開和關閉(configurable)
可選的快捷鍵導航
支持多個樹形部件
另外還可以做爲 jQuery 插件。
官方主頁：[url]http://www.jstree.com/[/url]
jstree在goolge code上的託管項目：
[url]http://code.google.com/p/jstree/[/url]

[b]二、JStree的簡單用法[/b]

本文所講的jstree是基於[color=red][size=medium]jstree0.99a[/size][/color]版本進行[color=darkred][b]異步加載tree[/b][/color]的基本用法，截止到10年6月目前官方最新版本爲1.0正式版。前者0.99a以jquery-1.3.2.js爲js庫爲基礎構建，後者1.0以jquery-1.4.2.js爲基礎構建。兩者在架構上也非常的不一樣，0.99a和1.0爲完全不同的構建方式，在用戶使用上也是很大的不同。
所以基於用戶的不同需求，可以選擇不同的jstree不同版本。


代碼部分：

<%@page language="java" %>
<%@page pageEncoding="gb2312"%>
<script type="text/javascript" src="/commons/jquery/jquery-1.3.2.js"></script>
<script type="text/javascript" src="/commons/jquery/jquery.tree.js"></script>
<script type="text/javascript" language="javascript">
  <!--  	
    	$(function () { 
    		$.ajaxSetup({cache:false});//ajax調用不使用緩存
    		$("#vcsTree").tree({//創建樹開始
    			  data : { 
    				type : "json",//類型爲json
    				async : true,//動態操作
    				opts : {
    					method : "get", //設置以get方式向服務器提交數據
    					url : "datajson.jsp"//此頁面返回以json標準格式的json數據串
    				}
    			 },//end data
    			 ui:{
    				 theme_name : "classic" //設置皮膚樣式
    			 },
    			 lang:{     
				 loading : "目錄加載中……"  //設置節點打開時默認加載顯示默認爲loading
			 },  
    			 types :{
    			 	"default" : {
    			 		draggable : false //設置節點不可拖拽
    			 	}
    			 },
	  		 callback : {	 
			     beforedata : function(node,tree_obj){
						return {id : $(node).attr("id") || 0,rel : $(node).attr("rel")};//進行以異步傳參 
				},
				onselect : function(node,tree_obj){//節點單擊事件
						 var test = $(node).children("a").attr("href");//獲取json串A標籤中href屬性值
						 $(parent.document.body).find('#CONTENT_WORK_MAIN').attr('src', test);
						 //獲取點擊的A標籤的href屬性，然後獲取右邊的iframe對象，然後設置iframe的location
				},
				onsearch : function(node, tree_obj) {//節點查找功能
					tree_obj.container.find(".search").removeClass("search");
					node.addClass("search");	
				}
			} //end callback	    
    		});
    	});
	     function searchnodes(){
	     	alert("start search");
	   	   jQuery.tree.focused().search(jQuery('#search_').val());
	     }
    //-->
</script>
<div id="container"> 
			<h2 class="title">JsTree</h2>
			<div id="vcsTree"></div>
		<div class="source">
			<input type="text" id="search_" />
			<input type="button" id="search_op" οnclick="searchnodes()" value="Search" />
		</div>
</div>

[color=red]部分代碼的解釋：[/color]

本代碼可直接作爲異步加載tree項目中源碼來用，部分功能依用戶要求可自行刪除。
代碼格式以固定形式進行保留即可，部分代碼已有註釋，在此將不再進行詳細闡釋。
現對我在jstree異步加載的部分做些說明：

				beforedata : function(node,tree_obj){
						return {id : $(node).attr("id") || 0,rel : $(node).attr("rel")}; //進行以異步傳參 
				},

[color=red]beforedata [/color] 它一定是要寫在callback函數中的，return的兩個參數 "id" 和 "rel" 就是客戶端傳給服務器端的兩個參數值，id 表示節點的nodeid，rel 表示節點的type類型（是root節點，還是folder節點抑或是leaf節點）， 服務器端對其進行邏輯處理，把處理結束的數據以json格式的數據返回給客戶端，進行下級節點的加載。
當然用戶也可以選擇傳一個參，或者更多。

onselect : function(node,tree_obj){//節點單擊事件
						 var test = $(node).children("a").attr("href");//獲取json串A標籤中href屬性值
						 $(parent.document.body).find('#CONTENT_WORK_MAIN').attr('src', test);
						 //獲取點擊的A標籤的href屬性，然後獲取右邊的iframe對象，然後設置iframe的location
				},

[color=red]onselect [/color] 寫在回調函數裏，這個地方主要是做了一件事，點擊tree上節點，顯示對應樹節點的基本信息，分左右兩欄兩個iframe，總是單擊左邊樹節點時，對右邊iframe的src進行處理，以便顯示對應的樹的詳細信息。
說白點就是單擊節點的時候總會以已知的屬性值，替換掉右邊欄iframe的src值。

onsearch : function(node, tree_obj) { //節點查找功能
   tree_obj.container.find(".search").removeClass("search");
   node.addClass("search");	
}
function searchnodes(){
   jQuery.tree.focused().search(jQuery('#search_').val());
}
<div class="source">
   <input type="text" id="search_" />
   <input type="button" id="search_op" οnclick="searchnodes()" value="Search" />
</div>

[color=red]onsearch[/color] ，此函數也是寫在callback函數裏，此函數主要實現節點查找功能，輸入要查找的節點名稱，所有匹配條件的節點都會被打開；
本部分代碼在jstree的例子中就是這樣寫的，removeClass，addClass主要爲查找到的節點添加顯示樣式，search("節點名稱")就是實現查找功能的函數當然只限於當前樹進行節點查找。

[color=green]但是到現在爲止，本樹只實現了異步加載樹的功能，對異步節點的查找功能還在繼續學習之中，另外對jstree的換膚功能也要根據項目的需求進行改進，可對每個節點進行單獨換膚的功能。

jstree 簡單解決方案之節點換膚：[url]http://www.iteye.com/topic/701859[/url]
[/color]


如果有什麼不理解的地方，請給本人留言。我們可以互相交流，共同進步。
對以上功能如添加、刪除節點、異步查找節點等的功能以後還會繼續進行完善，請繼續關注。

本jstree實現的圖片：

[img]http://dl.iteye.com/upload/attachment/268531/114ac4e3-2ab5-3ad8-8122-78f0a707b4c2-thumb.jpg[/img]

[color=red] [b]我的json數據格式： 請查看 jsondata.rar [/b] [/color]