這是本人第一個技術文章，首先宣告，我其實是一個菜鳥 ，工作也才不到三個月，從認識java到現在也才剛剛一年。 寫這篇文章呢，也主要是為了把自己的心得記錄下來，也為了以後可以翻閱。 同時也希望可以分享出來與大家一起探討。 寫的不好，請輕噴，有什麼不對的地方，指出來大家一起探討一下。


-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------


首先：因為最近做專案需要用到easyui tree，但是資料量非常大，如果一次性全加載出來，實在慢的髮指，再加上easyui 本身速度就不快（因為easyui 不是用的你寫在頁面的標籤，他會為你生成一套標籤。通過firebug可以檢視的到。）。所以必須用到easyui tree 的非同步載入。


查了很多資料，也看了很多大家的部落格，總是不能成功，大家的方法各不相同，有些後臺資料是用字串拼接的，又感覺非常繁瑣，所以綜合了一下大家的東西，又自己思考一下，終於最後弄出了一個還算不錯的解決方法。

首先是前臺頁面的程式碼 ，跟大部分的大家寫的沒什麼區別：

	<div >
		<a href="#" onclick="collapseAll()">CollapseAll</a>
		<!-- <a href="#" onclick="expandAll()">ExpandAll</a> -->
		<span hidden="true" id="ajaxurl">這裡放入預設載入的地址</span>
		<span hidden="true" id="ajaxu">這裡放入非同步載入的地址</span>
	</div>
	<ul id="tt" data-options="animate:true"></ul>
	<script type="text/javascript">
		$(function(){
			//預設載入的url
			var $ajaxurl = $("#ajaxu").text();
			//動態載入的url
			var $ajaxu = $("#ajaxu").text();
			$("#tt").tree({
				checkbox: false,//是否需要多選框
				url:$ajaxurl,
				onBeforeExpand:function(node){//這個事件不用多說，就是 展開前 的意思
					$("#tt").tree("options").url = $ajaxu+node.id;// 這裡是為非同步載入的地址傳遞引數                    
				},onClick:function(node){
					//這個是判斷該節點是否有子節點 沒有子節點的state是undefined 前段拼裝資料的時候會介紹如何操作
					if(node.state=="open"||node.state=="closed"){
						//這個是單擊事件 你可以選擇不要這部分，因為我們公司需要用到單擊然後進入一個頁面 所以這個事件有加上
					}else{
						
					}
				}
			});   
		});   
	</script>
 

既然我們要做的是非同步載入 自然是需要從資料庫中取出資料 


我們需要一個實體類 ，公司的實體類比較複雜 就不復制了 ，隨便寫一個
下面的實體類是手動寫 ，大家僅作參考，因為每個人的專案資料庫結構都是不同的

	public class Node{
		String id ; //當前節點id
		String parentId ;//父節點id
		 //判斷該節點是不是最終節點 也就是說如果是最終節點 那麼這個節點就沒有子節點 當然我們也可以利用childrenNodes的size來判斷
		 //不過有些情況是沒辦法這麼做的 我目前的專案就沒有就只能利用某些其他屬性來判斷 大家視情況而定
		bolean endflag ;

		String text ;//

		//這裡可以有一個子節點的集合 具體怎麼關聯這個操作 這裡就不說了 自行百度查詢 
		//每個人資料結構不一樣 子節點集合怎麼取自然也不相同 總之能取到子節點的集合就可以了
		Set<Node> childrenNodes ;
		。
		。
		。
		//省略get set 和註解配置
	}
 

接下來是控制層  我用的是SpringMVC  所以也即是controller 的方法

	@RequestMapping(value="/listtree.do")
	public String listtree(HttpServletRequest request,ModelMap model){
		//這裡你要有一個能進入你所在頁面的方法 然後頁面會自動呼叫 上面預設取載入的url 進行載入
		//下面的返回值 大可以無視 我們的專案吧路徑都封裝了 所以是這樣 你們返回自己的路徑就好了。
		return ConstantsUtil.getRedirectPath(CURBASEPATH+"list");
	}
	//然後就是重點了 動態獲取資料的方法 拼接資料 也在這個方法裡面
	@RequestMapping(value="/list.do")
	public void list(HttpServletRequest request,HttpServletResponse response,ModelMap model){
		//我們需要傳回一個父節點 通過這個父節點 來獲取該父節點的子節點
		String id = request.getParameter("id");
		//儲存各個節點的集合 一個map物件就是一個節點 一個節點 儲存了該節點的各個屬性
		List<Map<String,Object>> items = new ArrayList<Map<String,Object>>();
		List<Node> nodes = null ;
		//這裡是為了把list物件轉換成json資料 如果要轉換集合 用JSONArray 如果要轉換的是單個物件 則用 JSONObject
		JSONArray jsonArray = null ;
		//根據Id取值 可以判斷 如果Id不為null 則說明是進行的非同步載入  如果為null或者是空字串 則是第一次的預設載入 
		if(id!=null && !"".equals(id)){
			//資料庫取值 就不詳細解釋了
			nodes = service.getById(id).getChildrenNodes();
			Map<String,Object> item = null ;
			//組裝tree能夠識別的json格式
			for(Node node : nodes){
				item = new HashMap<String, Object>() ;
				//這裡的Id很重要 就是你的主鍵 我們要根據這個主鍵來獲取資料
				item.put("id", node.getId());
				//text 就是節點的名字 顯示給我們看的內容
				item.put("text", node.getName());
				//自定義屬性 把上級Id放入進去 如果我們希望獲取該節點的上級節點 或者是其他的什麼屬性 我們可以自定義屬性
				Map<String,Object> attr = new HashMap<String,Object>() ;
				attr.put("parentId", productNum);
				//然後把自定義的這個屬性放入進item這個節點中 這就是資料的組裝  因為我們這個是點選之後載入子節點 
				//所以不用手動來新增 childre這個屬性  easyui tree的非同步獲取資料 會幫我們載入 
				//除非我們需要一次性載入很多資料 那我們就可以封裝children
				item.put("attributes", attr);
				//設定 state屬性  不設定的的話 預設是open 開啟的 這個絕對不行 因為我們要非同步載入 就要設定成關閉
				if(!node.isEndflage()){
					item.put("state", "closed");
				}else{
					//如果這個節點沒有子節點 那麼你可以這麼設定
					item.put("state", "");
				}
				//最後把這個節點放入items的集合中
				items.add(item);
			}
			//這就是把節點轉換成了 easyui tree 能識別的格式
			//JSONArray 是轉換集合 而 JSONObject 是轉換物件
			jsonArray = JSONArray.fromObject(items);
		}
		//預設的節點怎麼設計我們可以自己考慮一下 根據自己的需求  
		//只要判斷一下 然後建立一個節點 把上面的節點放入預設節點的子節點中即可
		//比如上面判斷的是id不為null 加入預設的url地址是null 那麼我們就判斷一下如果為null 這個節點要怎麼組裝 就可以了。
		try {
		//json資料響應到頁面 然後樹就可以顯示出來了
			response.getWriter().print(jsonArray);
		} catch (IOException e) {
			e.printStackTrace();
		}
	}

總結一下 我在網上看到的好多都是用的字串來拼接 感覺那樣很麻煩，要非常注意到一些括號的巢狀啊，雙引號啊還要用到轉義字元
很亂也很不方便 所以綜合了一下網上的各個方法  
用map集合的方式來組裝, 是很方便的， 不用考慮格式問題 ，我們只要按照正確的順序組裝就可以了.

大概就是這麼多了，註釋有點多,看起來可能有點亂。 大傢什麼問題可以留言，一起探討一下。

上面的這些程式碼呢，精良不要直接複製去使用，根據自己的情況 來看。因為公司的程式碼複雜， 所以這些程式碼是手動些的，這些主要是一個思路和方法。大家作為參考用的。