La función de chat se introdujo en el artículo anterior, y aquí presentamos cómo se implementa la libreta de direcciones. Primero, debe cargar todos los departamentos de la empresa y una estructura de árbol, luego hacer clic para ingresar a la lista de personal del departamento, haga clic para ver la información detallada.
1. Interfaz
Estructura de árbol del departamento de la empresa:
Lista de miembros del departamento:
Detalles personales:
2. Implementación del código
1.Controller
/*** Lista de departamento de carga*/@RequestMapping ("/DirectionListDePartmentJsp.do") public void DirectionListDePartment (HttpServletRequest Solicitud, respuesta httpServletResponse) lanza IOException {request.setcharacteriCoding ("UTF-8"); respuesta.setcharacterEncoding ("UTF-8"); Lista <JSONTree> jslist = direccionalListservice.gettree (); JSONArray JSONArray = JSONArray.FromObject (jslist); PrintWriter out = Response.getWriter (); out.print (JSONArray); }/*** Cargue la lista de miembros del departamento*/@RequestMapping ("/directionListUserList.do") Public String DirectionListUserList (HttPservletRequest Solicitud, HttpServletResponse Response) lanza UnspportedEncodeNexception {request.setcharacteriCoding ("UTF-8"); respuesta.setcharacterEncoding ("UTF-8"); Cadena deptid = request.getParameter ("departamid"); Cadena d = request.getParameter ("departamname"); String DepartmentName = new String (d.getBytes ("ISO-8859-1"), "UTF-8"); Lista <SererDetail> userDetail = direccionesListservice.getUserDetail (departamento); request.setAttribute ("userDetail", userDetail); request.SetAttribute ("Departamento de Departamento", Departamento de nombre); devolver "DirectSListUserList"; }/*** Ver detalles del empleado*/@RequestMapping ("/DirectionListUserInfo.do") Public String DirectionListUserInfo (HttpServletRequest Solicitud, httpServletResponse Response) lanza UnspportedEncodingException {request.sEncharacterIncoding ("UTF-8"); respuesta.setcharacterEncoding ("UTF-8"); Cadena n = request.getParameter ("nombre"); Name de cadena = nueva cadena (n.getBytes ("ISO-8859-1"), "UTF-8"); Cadena mobile = request.getParameter ("mobile"); String Correo electrónico = request.getParameter ("correo electrónico"); String weixinid = request.getParameter ("weixinid"); Cadena avatar = request.getParameter ("Avatar"); Cadena d = request.getParameter ("departamname"); String DepartmentName = new String (d.getBytes ("ISO-8859-1"), "UTF-8"); request.setAttribute ("nombre", nombre); request.setAttribute ("móvil", móvil); request.setAttribute ("correo electrónico", correo electrónico); request.setAttribute ("weixinid", weixinid); request.setAttribute ("Avatar", avatar); request.SetAttribute ("Departamento de Departamento", Departamento de nombre); devolver "DirectSListUserInfo"; } 2.serviceImpl
/*** Lista de departamento de carga*/Lista pública <jsontree> gettree () {// 1. Get Token String AccessToken = CommonUtil.GetAccessToken ("WXE510946434680DAB", "EWTAHO766INVP4E1MCSZ1MHYUT2DALEB62REQ3VSFIZY4VTMWZPKWEUXUVH33G0G0"). // 2. Obtener la lista de la lista de departamento <Scart de departamento> Departamento = AdvancedUtil.GetDePartment (AccessToken); // Convertir al formato requerido por la página de acuerdo con la lista de la lista del departamento <jsontree> jslist = this.convertList (DepartmentList); regresar jslist; } / *** Convertir al formato Ztree* / List público <jsontree> conVertList (List <Scontion> DepartmentList) {list <Jsontree> rootNode = new ArrayList <JsonTree> (); for (int i = 0; i <departmentList.size (); i ++) {for (int j = i+1; j <departamentList.size (); j ++) {if (departamentList.get (i) .getId () == departamentList.get (j) .getParentId ()) {jSonTree JT = neo jsonTree (); jt.setid (departamentList.get (i) .getId ()); JT.SetName (Departamento de Departamento.Get (i) .getName ()); jt.setpid (departmentList.get (i) .getParentId ()); jt.setopen (falso); jt.seturl (""); rootnode.add (jt); romper; } else {jsontree jt = new Jsontree (); jt.setid (departamentList.get (i) .getId ()); JT.SetName (Departamento de Departamento.Get (i) .getName ()); jt.setpid (departmentList.get (i) .getParentId ()); jt.setopen (falso); JT.SetUrl ("DirectSListUserList.do?departMentId ="+departmentList.get (i) .getId ()+"& departamname ="+departmentList.get (i) .getName ()); rootnode.add (jt); romper; }}} return rootNode; } /*** Cargue la lista de miembros del departamento* /Public List <SererDetail> getUserDetail (String Deptid) {// 1. Get Token First String AccessToken = CommonUtil.GetAccessToken ("WXE510946434680DAB", "EWTAHO7666INVP4E1MCSZ1MHYUT2DALEB62REQ3VSFIZY4VTMWZPKWEUXUVH33G0G0"). // 2. Obtenga la lista de miembros del departamento en función de la ID de departamento y la lista de valores del token <SererDetail> userDetail = AdvancedUtil.getuserDetail (AccessToken, Deptid); devolver userDetail; } 3. Herramientas
// Obtener la lista de departamento de la lista estática pública <Scarte> // https://qyapi.weixin.qq.com/cgi-bin/department/list?access_token=access_token string requestS = "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 ("departamento"), department.class); } Catch (JSonexception e) {Departamento de Departamento = NULL; int errorcode = jsonObject.getInt ("errcode"); String ErrormSg = jsonObject.getString ("errmsg"); }} return DepartmentList; } // Obtenga los detalles del miembro del departamento Lista estática pública <SererDetail> getUserDetail (String AccessToken, String Department) {List <SererDetail> 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 ("departam_id", departamid); 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 SETILENCIA = {Ver: {showline: false, showicon: false, selectedMulti: false, dblClICKExPand: false, addDiyDom: adddiydom}, data: {simpledata: {enable: true}}, devolución de llamada: {BefForeclick: BeForeclick}}; var znodes = null; $ .AJAX ({type: "post", async: false, url: "directionListDepartmentJsp.do", éxito: function (data) {zNodes = eval ('(' + data + ')');}, error: function (data) {}}); función 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); devolver falso; } if (str == "") {} return true; } // Zhang Xiaozhu Dan Función GetAllChildrennodes (treeNode, resultado) {// var strResult = resultado; if (treeNode.IsParent) {var childrennodes = treeNode.children; if (childrennodes) {for (var i = 0; i <childrennodes.length; i ++) {resultado += ',' +childrennodes [i] .id; }}} Resultado de retorno; } $ (documento) .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]; 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 Símbolo "," Helvetica Neue ", Arial} .ztree li ul {margin: 0; Padding: 0} .ztree li {line-height: 30px;} .ztree li a {ancho: 100%; altura: 30px; padding-top: 0px; border-bottom: 1px #eeeee sólido} .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: negri {Background-Image: Url ("Images/Left_MenUforoutlook.png"); *Background-Image: Url ("./ Left_menuforoutlook.gif")} .ztree li span.button.switch.level0 {ancho: 20px; altura: 20px} .ztree li span.button.switch.level1 {ancho: 20px; altura: 20px} .ztree li span.button.noline_open {en segundo plano: 0 0;} .ztree li span.button.noline_close {en segundo plano: -18px 0;} .ztree li span.button.noline_open.level0 {en segundo plano: 0 -18px;} .ztree .ztree span.button.noline_close.level0 {en segundo plano: -18px -18px;} </style> </head> <body> <div data -role = "página" id = "usermain"> <div> <ul id = "tredemo"> </ul> </div> </div> <span id = "znodes"> </span> </diviv> </diviv> </div) 3. Resumen
La función de la libreta de direcciones no es tan difícil como se imagina. La estructura del árbol adopta el marco Ztree. Los datos encontrados en el fondo deben convertirse en el nombre definido por ZTree. Luego, la pantalla y la consulta de la lista de miembros del departamento se utilizan para mostrar y consultar el jQuery Mobile. En futuros artículos, se introducirá el uso de este JS. A partir del nombre, sabemos que está especialmente desarrollado para páginas móviles.
Lo anterior es todo el contenido de este artículo. Espero que sea útil para el aprendizaje de todos y espero que todos apoyen más a Wulin.com.