效果圖：

一、需要引入檔案有：jquery.js、zTree/2.6/zTreeStyle.css、zTree/2.6/jquery.ztree-2.6.min.js

       注意引入先後順序要先引入jquery.js；

二、html程式碼：

<input type="text" name="department_name" id="department_name" value="${pd.department_name}" 
	maxlength="100" placeholder="點選選擇組織機構" title="組織機構" style="width:98%;" readonly="readonly"
	onclick="initTree()"/>
<input type="hidden" name="department_id" id="department_id" value="${pd.department_id}" />	
<div id="departmentTreeDiv" style="display:none;background-color: white;position:absolute;z-index:9999;border: 1px solid #DDDDDD">  							        	
      <ul id="departmentTree" class="tree"></ul>	        
</div>

<script type="text/javascript">
    var treeDataList=${departmentList};
    function initTree(){
	      //傳入所需要的id屬性名
            treeDiv("departmentTree","departmentTreeDiv","department_name","department_id",);
    }

</script> 

解釋：第一個input用於存放ztree選中後節點的名稱name；第二個input用於存放ztree選中節點後對應的id值；div用於承載整個樹形結構；
 

三、treeDiv.js工具（ztree的操作）：

//自定義下拉框整合ztree
//機構樹
/*傳入引數tree:用於承接ztree的ul的id;treeDivId:用於承接ztree的div的id;inputId:接受顯示選中文字的input的id;
	     inputHideId:接受選中文字對應的id的input的id（一個hidden的input）;treeDataList:形成樹形需要的資料陣列；
*/
var zTree;
var treeId;
function treeDiv(tree,treeDivId,inputId,inputHideId,treeDataList){
	treeId=tree;
	var departmentList=treeDataList;
	var setting = {
		showLine: true,
		checkable: false,
		callback:{
			 beforeClick:zTreeBeforeClick
		}
	};								
	zTree = $("#"+tree+"").zTree(setting, departmentList);
	function zTreeBeforeClick(treeId, treeNode){
		$("#"+treeDivId+"").css("display","none");
		$("#"+inputId+"").val(treeNode.name);
		$("#"+inputHideId+"").val(treeNode.id);
	}
	ck(treeDivId,inputId);
}
function ck(treeDivId,inputId){
    //控制departmentTreeDiv承接樹形結構的div的隱藏			
    var obj=$("#"+treeDivId+"");
    var oBtn=$("#"+inputId+"");	 
    document.onclick=function(event){
	var e=event || window.event;//相容ie和非ie的event
        var aim=e.srcElement || e.target; //相容ie和非ie的事件源		   		       
        if(e.srcElement){
	       var aim=e.srcElement;
	       aimFun(aim,oBtn,obj);
        }else{
    	   var aim=e.target;
    	   aimFun(aim,oBtn,obj);    		          
        }
    }
}
function aimFun(aim,oBtn,obj){
     var f=true;
     if(aim==oBtn[0]){
	   obj.toggle();
     }
     if(aim.toString()=="[object HTMLButtonElement]"){
	    var btn=obj.find("button");
    	f=setTval(aim,btn);
     }
     if(aim.toString()=="[object HTMLLIElement]"){
	   var li=obj.find("li");
    	f=setTval(aim,li);
     }
     if(aim.toString()=="[object HTMLUListElement]"){
	   var ul=obj.find("ul");
    	f=setTval(aim,ul);
     }
     if(aim!=oBtn[0] && aim!=obj[0] && f){
	   obj.css("display","none");

     } 

//當多個樹形結構時，點選其中一個input暫時樹形時，隱藏其他的樹形結構div   

     var ulArr=$(".tree");       
     for(var i=0; i<ulArr.length;i++){
    	 if(treeId!=$(ulArr[i]).attr("id")){
    		 $(ulArr[i]).parent().css("display","none");
    	 }
     }
}
function setTval(aim,arr){
	var f=true;
	if(arr !=null &&arr!=undefined && arr.length>0){
		for(var i=0;i<arr.length;i++){
			if(aim==arr[i]){
				f=false;
				return;
			}
		}
	}
	return f;
}
 

四、後臺方法:

1、controller:

import net.sf.json.JSONArray;

@RequestMapping(value="/goAdd")
public ModelAndView goAdd()throws Exception{
ModelAndView mv = this.getModelAndView();
//樹資料
List<Map<String,Object>> depList=service.findTreeList("0");
JSONArray departmentList= JSONArray.fromObject(depList);
mv.addObject("departmentList",departmentList);
mv.setViewName("jsp頁面");
return mv;
}

2、impl:

/**
 * 獲取tree資料,遞迴實現
 * @param parentId
 * @return
 * @throws Exception
 */
@Override
public List<Map<String, Object>> findTreeList(String parentId) throws Exception {

List<Map<String,Object>>  list=(List<Map<String,Object>>)

               session.findForList("mapper.findTreeList"parentId);

 for( Map<String, Object> map : list) {
 map.put("nodes",findTreeList(map.get("id").toString()));
 }
return list;
}

3、mapper.xml:

<!-- 通過pId查詢客戶組織機構 ,首次pId="0"-->
<select id="findClientDepartmentList" parameterType="String" resultType="pd">
select o.department_id  "id",o.name  "name",o.parent_id  "pId" from  department o  where o.parent_id=                        # {parentId} 

</select>

五、前臺接收的資料結構如下供參考：

[{"nodes":[{"nodes":[{"nodes":[],"name":"客服B組","pId":"cbbc84eddde947ba8af7d509e430eb70","id":"83a25761c618457cae2fa1211bd8696d"},

{"nodes":[{"nodes":[],"name":"1隊","pId":"8f8b045470f342fdbc4c312ab881d62b","id":"a0982dea52554225ab682cd4b421de47"}],"name":"客服A組","pId":"cbbc84eddde947ba8af7d509e430eb70","id":"8f8b045470f342fdbc4c312ab881d62b"}],"name":"客服部","pId":"5cccdb7c432449d8b853c52880058140","id":"cbbc84eddde947ba8af7d509e430eb70"}],

"name":"C公司","pId":"0","id":"5cccdb7c432449d8b853c52880058140"},{"nodes":[{"nodes":[{"nodes":[],"name":"客戶關懷","pId":"d41af567914a409893d011aa53eda797","id":"0956d8c279274fca92f4091f2a69a9ad"},

{"nodes":[],"name":"客戶解惑","pId":"d41af567914a409893d011aa53eda797","id":"3e7227e11dc14b4d9e863dd1a1fcedf6"}],"name":"客戶部","pId":"a6c6695217ba4a4dbfe9f7e9d2c06730","id":"d41af567914a409893d011aa53eda797"}],"name":"D公司","pId":"0","id":"a6c6695217ba4a4dbfe9f7e9d2c06730"}]);

	

六、本工具沒有控制自適應承載ztree的div的寬度，請自行更具需要設定寬度，預設寬度為展開的樹形的寬度，需要其他方法，可在treeDiv.js裡面進行擴充套件，望能夠幫助有需要的人，不對之處請多多指正，謝謝！