The chat function was introduced in the previous article, and here we introduce how address book is implemented. First, you need to load all departments of the company and a tree structure, and then click to enter the department's personnel list. Click on personnel to view detailed information.
1. Interface
Tree structure of the company department:
Department Member List:
Personal details:
2. Code implementation
1.controller
/** * Loading department list*/ @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); } /** * Load the department member list*/ @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"; } /** * View employee details*/ @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
/** * Load department list*/ public List<JsonTree> getTree(){ //1. Get token String accessToken = CommonUtil.getAccessToken("wxe510946434680dab", "eWTaho766INvp4e1MCsz1mHYuT2DAleb62REQ3vsFizhY4vtmwZpKweuxUVh33G0").getAccessToken(); //2. Get department list List<Department> departmentList = AdvancedUtil.getDepartment(accessToken); //Convert to the format required by the page according to the department list List<JsonTree> jsList = this.convertList(departmentList); return jsList; } /** * Convert to ZTree format*/ 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; } /** * Load the department member list*/ public List<UserDetail> getUserDetail(String deptId){ //1. Get token first String accessToken = CommonUtil.getAccessToken("wxe510946434680dab", "eWTaho766INvp4e1MCsz1mHYuT2DAleb62REQ3vsFizhY4vtmwZpKweuxUVh33G0").getAccessToken(); //2. Get the department member list based on the department id and token values List<UserDetail> userDetail = AdvancedUtil.getUserDetail(accessToken, deptId); return userDetail; } 3. Tools
//Get the department list 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; }//Get the details of department member 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; } // Zhang Xiaozhu Dan 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 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 #EEEEE 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 > <ul id="treeDemo" ></ul> </div> </div> <span id="zNodes"></span> </div> </body> 3. Summary
The address book function is not as difficult as imagined. The tree structure adopts the ztree framework. The data found in the background must be converted into the name defined by ztree. Then the display and query of the department member list are used to display and query the jquery mobile. In future articles, the use of this js will be introduced. From the name, we know that it is specially developed for mobile pages.
The above is all the content of this article. I hope it will be helpful to everyone's learning and I hope everyone will support Wulin.com more.