用了小一天的時間學習了zTree外掛，做出了一個地區樹的小例子，感覺這個外掛真的蠻強大的，實現的過程中也遇到了一些困惑，現在總結一下。

從官網 下載zTree外掛，專案中匯入js、css和image，zTree有很多擴充套件js，暫時沒有用上，所以只匯入jquery.ztree.core.js就可以了，當然還要匯入jquery.min.js，css需要匯入zTreeStyle.css，而demo.css中有很多樣式，如果需要用到的話也可以匯入。

首先頁面需要一個輸入框，通過點選輸入框彈出樹列表，選擇完地區後可以顯示地區名稱，當然還需要一個隱藏的輸入欄位來儲存地區的ID。

地區：<input type="text" id="area" onclick="treeText()"/>
      <input type="hidden" name="vo.areaId" id="areaId"/>
 

然後需要樹的容器，一個<ul>列表，class必須是ztree。

<div class="content_wrap" id="tree_box">
	<ul id="tree" class="ztree"></ul>
</div>

之後需要編寫java類來傳列表中的資料，zTree接收的資料是如同json一樣的格式，所以這裡將資料放進jsonArray中，然後轉成String型別。

如果是一次全部載入，直接取出所有結果放到jsonArray中即可。下面主要說明非同步載入。

先取根節點的資料，這裡的根節點只有一箇中國，所以直接取得。

public String getAreaRoot(){
	JSONArray jsonArray = new JSONArray();
	String sql = "select area_id,area_name from t_area where area_id=0";
	ps = conn.prepareStatement(sql);
	rs = ps.executeQuery();
	while(rs.next){
		JSONObject jsonObject = new JSONObject();
		jsonObject.put("areaId", rs.getLong("area_id"));
		jsonObject.put("areaName", rs.getString("area_name"));
		jsonObject.put("isParent", "true"); //判斷是否有子節點，就是前面有沒有那個小加號可以展開
		jsonArray.add(jsonObject);
	}
	return jsonArray.toString();
}
 

對於選擇一個地區展開其下列表，需要獲取這個地區ID，查詢父級parent_id為該地區ID的所有結果，查詢的同時還要得到每個結果是否還有子集。

public String getAreaChild(long id){
	JSONArray jsonArray = new JSONArray();
	String sql = "select area_id,area_name,parent_id,(select count(*) from t_area where t_area.parent_id=t.area_id) count from t_area t where parent_id=?";
	ps.setString(1,id);
	ps = conn.prepareStatement(sql);
	rs = ps.executeQuery();
	while(rs.next){
		JSONObject jsonObject = new JSONObject();
		jsonObject.put("areaId", rs.getLong("area_id"));
		jsonObject.put("areaName", rs.getString("area_name"));
		jsonObject.put("parentId", rs.getLong("parent_id"));
		jsonObject.put("isParent", "true"); 
		jsonArray.add(jsonObject);
	}
	return jsonArray.toString();
}

public String getIPArea() throws Exception{
	String jsonObj = new AreaTree().getAreaRoot();
	request.setAttribute("jsonObj", jsonObj);
	return "suc";
}
//這個方法困擾了我很久，兩個點，
//一個是js部分中的url應該連到此方法；
//第二是通過HttpServletResponse去傳遞結果，這是ajax機制，可惜沒有深入學
public void asyncTree() throws Exception{
	HttpServletResponse response;
	response.setCharacterEncoding("utf-8");
	PrintWriter out = response.getWriter();
	String jsonObj = new AreaTree().getAreaChild(this.getAreaId());
	out.print(jsonObj);
}

<script type="text/javascript">
	var ztreeObj;
	setting={
		view:{
			selectedMulti: false
		},
		//非同步載入的關鍵地方，如果是一次全部載入可以忽略
		async: {
			enable: true,
			url: "http://localhost:8080/areaTest/AreaAction!asyncTree.action",
			autoParam: ["areaId"], //非同步載入需要傳遞的引數
			dataType : "json",
			type : "post"
		},        
	        data:{
	        	key : {
	        		name : "areaName" //如果命名就是"name"，此處可以不寫
	        	},
			simpleData : {    
				enable : true,    
				idKey : "areaId", // id編號命名     
				pIdKey : "parentId", // 父id編號命名
			}    
		},
		callback: {
		       	asyncError: zTreeOnAsyncError,
				onClick: onClick,
			}
	}, 
		
	zTreeNodes = ${jsonObj}; //列表的資料寫在這裡，這裡用的EL表示式獲取action給的值
		
	//點選每個節點的事件
	function onClick(e,treeId, treeNode) {
		var zTree = $.fn.zTree.getZTreeObj("tree");
		zTree.expandNode(treeNode);
		$("#area").val(treeNode.areaName);
		$("#areaId").val(treeNode.areaId);		
	}
	function zTreeOnAsyncError(e, treeId, treeNode){    
		alert("非同步載入失敗!");    
        }
	
	//樹的初始化，必須要有的
      	$(document).ready(function(){     		
      		zTreeObj = $.fn.zTree.init($("#tree"), setting, zTreeNodes);

      	});
</script>