A função de bate -papo foi introduzida no artigo anterior e aqui introduzimos como o livro de endereços é implementado. Primeiro, você precisa carregar todos os departamentos da empresa e uma estrutura de árvores e clicar para inserir a lista de pessoal do departamento, clique para visualizar as informações detalhadas.
1. Interface
Estrutura de árvores do departamento da empresa:
Lista de membros do departamento:
Detalhes pessoais:
2. Implementação de código
1. Controlador
/*** Lista do departamento de carregamento*/@RequestMapping ("/endereçoListDepartmentJsp.do") public void endereçoListDepartment (httpServletRequest Request, httpServletResponse Response lança a ioexception {request.SetcharacterCoding ("utf-8"); Response.Setcharacterencoding ("UTF-8"); List <JSontree> jslist = endereçoListService.getTree (); JsonArray JsonArray = JsonArray.FromObject (JSLIST); PrintWriter out = Response.getWriter (); out.print (JsonArray); }/*** Carregue a lista de membros do departamento*/@RequestMapping ("/ADDEREDLISTUSERLIST.DO") public String AddressListUserList (solicitação httpServLeQuest, httpServletResponse Response) lança não suportadoCodingException {request.setcharacterCoding ("utf-8n); Response.Setcharacterencoding ("UTF-8"); DeptID de String = request.getParameter ("departamentId"); String d = request.getParameter ("departamentoname"); String departmentName = new String (D.GetBytes ("ISO-8859-1"), "UTF-8"); Lista <SuperDetail> userDetail = endereçoListService.getUserDetail (DeptID); request.setAttribute ("userDetail", userDetail); request.setAttribute ("departmentName", nome do departamento); retornar "endereço -listuserlist"; }/*** Exibir detalhes do funcionário*/@RequestMapping ("/endereçoListUserinfo.do") public String AddressListUserinfo (solicitação de HttpServLeQuest, httpServLetResponse resposta) lança unsupportEncodingException {request.SetcharacterCoding ("utf-8n); Response.Setcharacterencoding ("UTF-8"); String n = request.getParameter ("nome"); Nome da string = new String (n.getBytes ("ISO-8859-1"), "UTF-8"); String móvel = request.getParameter ("Mobile"); String email = request.getParameter ("email"); String weixinid = request.getParameter ("weixinid"); String avatar = request.getParameter ("avatar"); String d = request.getParameter ("departamentoname"); String departmentName = new String (D.GetBytes ("ISO-8859-1"), "UTF-8"); request.setattribute ("nome", nome); request.setattribute ("celular", celular); request.setattribute ("email", email); request.setAttribute ("weixinid", weixinid); request.setattribute ("avatar", avatar); request.setAttribute ("departmentName", nome do departamento); retornar "endereço -listuserinfo"; } 2.ServiceImpl
/*** Lista do departamento de carga*/Lista pública <JSontree> gettree () {// 1. Get token string accessToken = CommonUtil.getAccessToken ("WXE510946434680DAB", "EWTAHO766Irp4e1MCSZ1MHYUT2DALEB62REQ3VSFIZHY4VTMWZPKWEUXUVH330GEM). // 2. Obter lista de departamento <ActomingLy> departamentList = Advancedutil.getDepartment (AccessToken); // converta para o formato exigido pela página de acordo com a lista de departamentos <JSOntree> jslist = this.convertlist (departamentolist); retornar JSList; } / *** Converta em formato ztree* / list public <JSOntree> convertlist (list <itemor DepartmentList) {list <JSontree> rootNode = new ArrayList <JSontree> (); para (int i = 0; i <departamentoList.size (); i ++) {for (int j = i+1; j <departamentoList.size (); j ++) {if (departmentList.get (i) .getId () == departmentList.get (j) .getParentId ()) {jsonTree Jt = jTee (json. 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); quebrar; } 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 ("ADDEREDLISTUSERLIST.DODODETMENTIDID ="+departamentoList.get (i) .getId ()+"& departmentName ="+departmentList.get (i) .getName ()); rootNode.add (JT); quebrar; }}} retornar rootNode; } /*** Carregue a lista de membros do departamento* /Lista pública <UserDetail> getUserDetail (String DeptId) {// 1. Get token First String AccessToken = Commonutil.GetAccessToken ("WXE510946434680DAB", "ewtaho766invp4e1mcsz1mhyut2daleb62req3vsfizhy4vtmwzpkweuxuvH33G620"). // 2. Obtenha a lista de membros do departamento com base na lista de valores de ID e token do departamento <SuserDetail> userDetail = Advancedutil.getUserDetail (AccessToken, DeptID); return userDetail; } 3. Ferramentas
// Obtenha a lista de departamentos Lista de estática pública <Ectartion> getDepartment (string accessToken) {list <itemor 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/listd_tanccess_tonact=act=act=act=act=act=act=act=act=act=act=act=act=act=act=act=act=act=act=act=act=act=act=act=act=act=act=act=act=act=act=act=act=act=act=act=act=act=act=accesslin.Weixin.QQ.com/CGI-Bin/Department/List_Teck=ack=ack=ack=act=access requesturl = requesturl.replace ("access_token", accessToken); JsonObject jsonObject = CommonUtil.httpsRequest (requesturl, "get", null); if (null! = jsonObject) {tente {departmentList = jsonArray.tolist (jsonObject.getjsonArray ("departamento"), departamento.class); } catch (jsonexception e) {departamentList = null; int errorCode = jsonObject.getInt ("errcode"); String errorMsg = jsonObject.getString ("errmsg"); }} retornar departamentolist; } // Obtenha os detalhes da lista estática pública do membro do departamento <SuperDetail> getUserDetail (string accessToken, string departamentId) {list <userDetail> userDetail = null; String requesturl = "https://qyapi.weixin.qq.com/cgi-bin/user/list?access_token=access_token&deparment_id=department_id&fetch_child=1&status=0"; requestUrl = requesturl.replace ("access_token", accessToken) .replace ("department_id", departamento); JsonObject jsonObject = CommonUtil.httpsRequest (requesturl, "get", null); if (null! = jsonObject) {tente {userDetail = jsonArray.tolist (jsonObject.getjsonArray ("userList"), userDetail.class); } catch (jsonexception e) {userDetail = null; int errorCode = jsonObject.getInt ("errcode"); String errorMsg = jsonObject.getString ("errmsg"); }} retornar userDetail; } 4.js
<script type = "text/javascript"> var curmenu = null, ztree_menu = null; var com configuração = {view: {ShowLine: false, showicon: false, selectedMulti: false, dblclickexpand: false, adddiydom: adddiydom}, dados: {simpledata: {enable: true}}, retorno de chamada: {beforeClick: beforeClick};; var znodes = null; $ .ajax ({type: "post", assíncrono: false, url: "endereçoListDepartmentJsp.do", sucesso: function (data) {znodes = avaliar ('(' + dados + ')');}, erro: function (data) {}}); função adddiydom (árvore, treenode) {var spacewidth = 5; var switchobj = $ ("#" + Treenode.tid + "_switch"), icoobj = $ ("#" + Treenode.tid + "_ico"); switchobj.remove (); icoobj.be antes (switchobj); if (Treenode.Level> 1) {var spacestr = "<span style = 'display: inline-block; largura:" + (spacewidth * treenode.level) + "px'> </span>"; switchobj.be antes (espaçador); }} função beforeClick (árvore, 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); retornar falso; } if (str == "") {} retorna true; } // zhang xiaozhu dan if (Treenode.isparent) {var ChildrenNodes = Treenode.Children; if (criançasnodes) {for (var i = 0; i <ChildrenNodes.Length; i ++) {resultado += ',' +ChildrenNodes [i] .id; }}} Retornar resultado; } $ (document) .ready (function () {var Treeobj = $ ("#Treedemo"); $ .fn.ztree.init (Treeobj, Configuração, 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; preenchimento: 0} .ztree li {altura de linha: 30px;} .ztree li a {width: 100%; altura: 30px; taping taping: 0px; borda-bottom: 1px #eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee .ztree li a: hover {text-decoration: nenhum; Background-Color: #e7e7e7;}/ * .ztree li a span.button.switch {visibilidade: hidden} */ .ztree.showicon li a span.button.switch {}: visível} .ztree li a.curselectedNode {backgr-color: #d44d4; {Linha de altura: 30px;} .ztree li span.button {margin-top: -7px;} .ztree li span.button.switch {width: 16px; altura: 16px;} .ztree li li.level0 span {font-size: 150%; font-weike: Bold; {Background-Image: URL ("Images/Left_MenuForoutlook.png"); *Imagem de fundo: url ("./ left_menuforoutlook.gif")} .ztree li span.button.switch.level0 {width: 20px; Altura: 20px} .ztree li span.button.switch.level1 {width: 20px; Altura: 20px} .ztree li span.button.noline_open {Posição de fundo: 0 0;} .ztree li span.button.noline_close {posição de fundo: -18px 0;} .ztree li span.button.noline_open.level0 {bordous-rupice-position: span.button.noline_close.level0 {posição de fundo: -18px -18px;} </style> </head> <body> <div data -role = "página" id = "userMain"> <dnpan> <l id = "Treedemo"> </ul> </div> </div> <pange <span> <ul id = "" 3. Resumo
A função do livro de endereços não é tão difícil quanto imaginada. A estrutura da árvore adota a estrutura ZTree. Os dados encontrados em segundo plano devem ser convertidos no nome definido pela ZTree. Em seguida, a tela e a consulta da lista de membros do departamento são usadas para exibir e consultar o jQuery Mobile. Em artigos futuros, o uso deste JS será introduzido. A partir do nome, sabemos que ele é especialmente desenvolvido para páginas móveis.
O exposto acima é todo o conteúdo deste artigo. Espero que seja útil para o aprendizado de todos e espero que todos apoiem mais o wulin.com.