上篇部落格介紹了聊天功能，這裡介紹通訊錄是如何實現的。首先要載入公司的所有部門，樹形結構，然後點選進入部門的人員列表，點選人員能檢視詳細資訊。

一、介面

    公司部門的樹形結構：

    部門成員列表：

        個人詳細資訊：

二、程式碼實現

1.controller

        /**
	 * 載入部門列表
	 */
	@RequestMapping("/addressListDepartmentjsp.do")
	public void  addressListDepartment(HttpServletRequest request, HttpServletResponse response) throws IOException{
		request.setCharacterEncoding("utf-8");
		response.setCharacterEncoding("utf-8");
		
	    List<JsonTree> jsList = addressListService.getTree();
	    JSONArray jsonArray = JSONArray.fromObject(jsList);
	    PrintWriter out = response.getWriter();
	    out.print(jsonArray);
	}
	
	
	/**
	 * 載入部門成員列表
	 */
	@RequestMapping("/addressListUserList.do")
	public String addressListuserList(HttpServletRequest request,HttpServletResponse response) throws UnsupportedEncodingException{
		 request.setCharacterEncoding("utf-8");
		 response.setCharacterEncoding("utf-8");
		 String deptId=request.getParameter("Departmentid");
		 String d=request.getParameter("departmentName");
		 String departmentName = new String(d.getBytes("ISO-8859-1"),"utf-8");
		 List<UserDetail> userDetail = addressListService.getUserDetail(deptId);
		 
		 request.setAttribute("userDetail", userDetail);
		 request.setAttribute("departmentName", departmentName);
		 return "addressListUserList";
	}
	
	
	/**
	 * 檢視員工詳細資訊
	 */
	@RequestMapping("/addressListUserInfo.do")
	public String addressListuserInfo(HttpServletRequest request,HttpServletResponse response) throws UnsupportedEncodingException{
		request.setCharacterEncoding("utf-8");
		response.setCharacterEncoding("utf-8");
		
		String n=request.getParameter("name");
		String name = new String(n.getBytes("ISO-8859-1"),"utf-8");
		String mobile=request.getParameter("mobile");
		String email=request.getParameter("email");
		String weixinid=request.getParameter("weixinid");
		String avatar=request.getParameter("avatar");
		String d=request.getParameter("departmentName");
		String departmentName = new String(d.getBytes("ISO-8859-1"),"utf-8");
		request.setAttribute("name", name);
		request.setAttribute("mobile", mobile);
		request.setAttribute("email",email);
		request.setAttribute("weixinid", weixinid);
		request.setAttribute("avatar", avatar);
		request.setAttribute("departmentName", departmentName);
		
		return "addressListUserInfo";
	}
 

2.serviceImpl

	/**
	 * 載入部門列表
	 */
	public List<JsonTree> getTree(){
		//1.先獲取token
		String accessToken = CommonUtil.getAccessToken("wxe510946434680dab", "eWTaho766INvp4e1MCsz1mHYuT2DAleb62REQ3vsFizhY4vtmwZpKweuxUVh33G0").getAccessToken();
		//2.獲取部門列表
		List<Department> departmentList = AdvancedUtil.getDepartment(accessToken);
		//根據部門列表轉換為頁面需要的格式
		List<JsonTree> jsList = this.convertList(departmentList);
		return jsList;
	}
	
	/**
	 * 轉為ZTree的格式
	 */
	public List<JsonTree> convertList( List<Department> departmentList)
    {
        List<JsonTree> rootNode = new ArrayList<JsonTree>();
       
        for (int i = 0; i < departmentList.size(); i++) {
        	for (int j = i+1; j <departmentList.size(); j++) {
        		if (departmentList.get(i).getId()==departmentList.get(j).getParentid()) {
					JsonTree jt = new JsonTree();
					jt.setId(departmentList.get(i).getId());
					jt.setName(departmentList.get(i).getName());
					jt.setpId(departmentList.get(i).getParentid());
					jt.setOpen(false);
					jt.setUrl("");
					rootNode.add(jt);
					break;
				}else {
					JsonTree jt = new JsonTree();
					jt.setId(departmentList.get(i).getId());
					jt.setName(departmentList.get(i).getName());
					jt.setpId(departmentList.get(i).getParentid());
					jt.setOpen(false);
					jt.setUrl("addressListUserList.do?Departmentid="+departmentList.get(i).getId()+"&departmentName="+departmentList.get(i).getName());
					
					rootNode.add(jt);
					break;
				}
			}

		}
        return rootNode;
    }
	
	/**
	 * 載入部門成員列表
	 */
	public List<UserDetail> getUserDetail(String deptId){
		//1.先獲取token
		String accessToken = CommonUtil.getAccessToken("wxe510946434680dab", "eWTaho766INvp4e1MCsz1mHYuT2DAleb62REQ3vsFizhY4vtmwZpKweuxUVh33G0").getAccessToken();
		
		//2.根據部門id和token的值獲取部門成員列表
		List<UserDetail> userDetail = AdvancedUtil.getUserDetail(accessToken, deptId);
		
		return userDetail;
	}
 

3.工具類

//獲取部門列表
public static List<Department> getDepartment(String accessToken) {
		List<Department> departmentList = null;
		//  https://qyapi.weixin.qq.com/cgi-bin/department/list?access_token=ACCESS_TOKEN
		String requestUrl = "https://qyapi.weixin.qq.com/cgi-bin/department/list?access_token=ACCESS_TOKEN";
		requestUrl = requestUrl.replace("ACCESS_TOKEN", accessToken);
	
		JSONObject jsonObject = CommonUtil.httpsRequest(requestUrl, "GET", null);

		if (null != jsonObject) {
			try {
				departmentList = JSONArray.toList(jsonObject.getJSONArray("department"), Department.class);
			} catch (JSONException e) {
				departmentList = null;
				int errorCode = jsonObject.getInt("errcode");
				String errorMsg = jsonObject.getString("errmsg");
				
			}
		}
		return departmentList;
	}
 

//獲取部門成員詳情
public static List<UserDetail> getUserDetail(String accessToken,String departmentId){
		List<UserDetail> userDetail = null;
		String requestUrl = "https://qyapi.weixin.qq.com/cgi-bin/user/list?access_token=ACCESS_TOKEN&department_id=DEPARTMENT_ID&fetch_child=1&status=0";
		requestUrl = requestUrl.replace("ACCESS_TOKEN", accessToken).replace("DEPARTMENT_ID", departmentId);
		
		JSONObject jsonObject = CommonUtil.httpsRequest(requestUrl, "GET", null);

		if (null != jsonObject) {
			try {
				userDetail = JSONArray.toList(jsonObject.getJSONArray("userlist"),UserDetail.class);
			} catch (JSONException e) {
				userDetail = null;
				int errorCode = jsonObject.getInt("errcode");
				String errorMsg = jsonObject.getString("errmsg");
				
			}
		}
		return userDetail;
	}

4.js

<script type="text/javascript">
		var curMenu = null, zTree_Menu = null;
		var setting = {
			view: {
				showLine: false,
				showIcon: false,
				selectedMulti: false,
				dblClickExpand: false,
 				addDiyDom: addDiyDom
			},
			data: {
				simpleData: {
					enable: true
				}
			},
			callback: {
				beforeClick: beforeClick
			}
		};
		var zNodes = null;
		$.ajax({
				type : "post",
 				async: false,
				url :"addressListDepartmentjsp.do",
				success : function(data) {
				zNodes = eval('(' + data + ')');
				},
				error : function(data) {				
					
				}
			});
		 
		function addDiyDom(treeId, treeNode) {
			var spaceWidth = 5;
			var switchObj = $("#" + treeNode.tId + "_switch"),
			icoObj = $("#" + treeNode.tId + "_ico");
			switchObj.remove();
			icoObj.before(switchObj);

			if (treeNode.level > 1) {
				var spaceStr = "<span style='display: inline-block;width:" + (spaceWidth * treeNode.level)+ "px'></span>";
				switchObj.before(spaceStr);
			}
		}

		function beforeClick(treeId, treeNode) {
		   var str ='' ;
			str = getAllChildrenNodes(treeNode,str);
			if (str.substr(0,1)==',') str=str.substr(1);
			if(str!=""){
				treeNode.url="";
				var zTree = $.fn.zTree.getZTreeObj("treeDemo");
				zTree.expandNode(treeNode);
				return false;
			}
			if(str==""){
			
			}
			return true;
		}
		
// 		張曉   朱丹
		function getAllChildrenNodes(treeNode,result){
			//var strResult=result;
	 		if (treeNode.isParent) {
				var childrenNodes = treeNode.children;
				if (childrenNodes) {
					for (var i = 0; i < childrenNodes.length; i++) {
						result += ',' + childrenNodes[i].id;
					}
				}
			}
		return result;
		}
 		 $(document).ready(function(){
			var treeObj = $("#treeDemo");
			$.fn.zTree.init(treeObj, setting, zNodes);
			zTree_Menu = $.fn.zTree.getZTreeObj("treeDemo");
			curMenu = zTree_Menu.getNodes()[0].children[0].children[0];
			zTree_Menu.selectNode(curMenu);

			treeObj.hover(function () {
				if (!treeObj.hasClass("showIcon")) {
					treeObj.addClass("showIcon");
				}
			}, function() {
				treeObj.removeClass("showIcon");
			});
		});
	</script>
	<style type="text/css">
		.ztree * {font-size: 13pt;font-family:"Microsoft Yahei",Verdana,Simsun,"Segoe UI Web Light","Segoe UI Light","Segoe UI Web Regular","Segoe UI","Segoe UI Symbol","Helvetica Neue",Arial}
		.ztree li ul{ margin:0; padding:0}
		.ztree li {line-height:30px;}
		.ztree li a {width:100%;height:30px;padding-top: 0px;border-bottom:1px #EEEEEE solid}
		.ztree li a:hover {text-decoration:none; background-color: #E7E7E7;}
/* 		.ztree li a span.button.switch {visibility:hidden} */
		.ztree.showIcon li a span.button.switch {visibility:visible}
		.ztree li a.curSelectedNode {background-color:#D4D4D4;border:0;height:30px;}
		.ztree li span {line-height:30px;}
		.ztree li span.button {margin-top: -7px;}
		.ztree li span.button.switch {width: 16px;height: 16px;}
		
		.ztree li a.level0 span {font-size: 150%;font-weight: bold;}
		.ztree li span.button {background-image:url("images/left_menuForOutLook.png"); *background-image:url("./left_menuForOutLook.gif")}
		.ztree li span.button.switch.level0 {width: 20px; height:20px}
		.ztree li span.button.switch.level1 {width: 20px; height:20px}
		.ztree li span.button.noline_open {background-position: 0 0;}
		.ztree li span.button.noline_close {background-position: -18px 0;}
		.ztree li span.button.noline_open.level0 {background-position: 0 -18px;}
		.ztree li span.button.noline_close.level0 {background-position: -18px -18px;}
	</style>
 </head>

	<body>
	 <div data-role="page" id="UserMain">
		<div class="content_wrap" style="width:96%;height:98%;margin-left: auto;margin-right: auto;" >
			<div class="zTreeDemoBackground left" style="width:100%;height:98%;" >
				<ul id="treeDemo" class="ztree" style="width:98%;height:98%;" ></ul>
			</div>
		</div>
		<span id="zNodes"></span>
		</div>
	</body>

三、總結

            通訊錄功能並沒有想象中的難，樹結構採用ztree框架，後臺查到的資料必須轉換為ztree定義的名稱，然後部門成員列表的顯示和查詢用到jquery mobile，在以後的部落格中再介紹這種js的使用，從名字上就知道它是專門為手機頁面開發的。