La fonction de chat a été introduite dans l'article précédent, et nous introduisons ici la façon dont le carnet d'adresses est implémenté. Tout d'abord, vous devez charger tous les départements de l'entreprise et une structure d'arbre, puis cliquez pour entrer la liste du personnel du ministère, cliquez pour afficher les informations détaillées.
1. Interface
Structure des arbres du département de l'entreprise:
Liste des membres du département:
Détails personnels:
2. Implémentation du code
1.Contrôleur
/ ** * Ligne de chargement du département * / @RequestMapping ("/ AddressListDepartmentJSP.do") public void AddressListDartment (HttpServletRequest Request, httpservletResponse réponse) lève ioException {request.SetcharacteRending ("utf-8"); Response.SetcharAtterencoding ("UTF-8"); List <JSonTree> jslist = AddressListService.getTree (); JSONArray JSONArray = JSONArray.FromObject (JSList); Printwriter out = réponse.getWriter (); Out.print (JSONArray); } / ** * Chargez la liste des membres du département * / @RequestMapping ("/ AddressListUserList.do") Public String AddressListUserList (HttpServletRequest Request, HttpservletResponse Response) lève un non-supportationxception {request.SetcharacteRencoding ("utf-8"); Response.SetcharAtterencoding ("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"; } / ** * Afficher les détails de l'employé * / @RequestMapping ("/ AddressListUserInfo.do") String public String AddressListUserInfo (HttpServLetRequest Request, HttpServletResponse Response) lève un non-supportationdingException {request.SetcharacterEncoding ("utf-8"); Response.SetcharAtterencoding ("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 ("e-mail"); 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", nom); request.setAttribute ("mobile", mobile); request.setAttribute ("e-mail", e-mail); request.setAttribute ("weixinid", weixinid); request.setAttribute ("Avatar", Avatar); request.setAttribute ("DepartmentName", DepartmentName); return "AddressListUserIrinfo"; } 2.ServiceImpl
/ ** * Liste du département de chargement * / Liste publique <JSonTree> GetTree () {// 1. Get token String AccessToken = Commonutil.getAccessToken ("WXE510946434680DAB", "EWTAHO766INVP4E1MCSZ1MHYUT2DALEB62REQ3VSFIZHY4VTMWZPKWEUXUVH33G0"). GetAccessToken (); // 2. Obtenez la liste des départements <mestry> DepartmentList = AdvancedUtil.getDepartment (AccessToken); // Convertir au format requis par la page selon la liste des départements <JSonTree> jslist = this.convertList (départementList); return jslist; } / ** * Converti au format Ztree * / public List <JSonTree> ConvertList (List <Department> DepartmentList) {List <JSonTree> rootNode = new ArrayList <JSonTree> (); pour (int i = 0; i <départementList.size (); i ++) {pour (int j = i + 1; j <départementList.size (); j ++) {if (DepartmentList.get (i) .getId () == Depadeptist.get (j) .getParentid ()) {jsonTree jt = new JSonTree (); jt.setid (DepartmentList.get (i) .getId ()); jt.setName (DepartmentList.get (i) .getName ()); jt.setpid (départementList.get (i) .getParentId ()); jt.setOpen (false); jt.setUrl (""); rootNode.add (jt); casser; } else {jsontree jt = new JSontree (); jt.setid (DepartmentList.get (i) .getId ()); jt.setName (DepartmentList.get (i) .getName ()); jt.setpid (départementList.get (i) .getParentId ()); jt.setOpen (false); jt.setUrl ("AddressListUserList.do?dePartmentId =" + DepartmentList.get (i) .getId () + "& DepartmentName =" + DepartmentList.get (i) .getName ()); rootNode.add (jt); casser; }}} return rootNode; } / ** * Chargez la liste des membres du département * / Liste publique <UserDetail> GetUserDetail (String Deptid) {// 1. Get Token First String AccessToken = Commonutil.getAccessToken ("WXE510946434680DAB", "EWTAHO766INVP4E1MCSZ1MHYUT2DALEB62REQ3VSFIZHY4VTMWZPKWEUXUVH33G0"). GETACCESSTOKINE (); // 2. Obtenez la liste des membres du département en fonction de la liste des valeurs de l'ID du département et des valeurs de jeton <UserDetail> userDetail = AdvancedUtil.getUserDetail (AccessToken, Deptid); return userDetail; } 3. Outils
// obtient la liste des départements Liste statique publique <mestargin> GetDepartement (String AccessToken) {List <p un département> DepartmentList = NULL; // https://qyapi.weixin.qq.com/cgi-bin/department/list?access_token=ACCESS_TOKIN CHANGE DEMANDURL = "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 ("département"), département.class); } catch (jSonException e) {DepartmentList = null; int errorcode = jsonObject.getInt ("errcode"); String errormsg = jsonObject.getString ("errmsg"); }} return DepartmentList; } // Obtenez les détails de la liste statique publique du département <ser userDetail> getUserDetail (String AccessToken, String DepartmentId) {list <serserDetail> 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", départementid); 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: {active: true}}, callback: {beforeclick: beforeClick}}; var zNodes = null; $ .ajax ({type: "Post", async: false, url: "AddressListDartmentjsp.do", succès: fonction (data) {zNodes = eval ('(' + data + ')');}, error: function (data) {}}); fonction adddiydom (arbreId, treenode) {var spatialwidth = 5; var switchoBj = $ ("#" + Treenode.tid + "_switch"), icoobj = $ ("#" + treenode.tid + "_ico"); switchoBj.Remove (); icoobj.before (switchoBj); if (Treenode.Level> 1) {var spacestr = "<span style = 'affichage: block en ligne; width:" + (SpaceWidth * Treenode.Level) + "px'> </span>"; switchoBj.before (spacestr); }} fonction beForeClick (TreeId, Treenode) {var str = ''; str = getAllChildRenDodes (Treenode, str); if (str.substr (0,1) == ',') str = str.substr (1); if (str! = "") {Treenode.url = ""; var ztree = $ .fn.ztree.getztreeObj ("Treedemo"); zTree.ExpandNode (Treenode); retourne false; } if (str == "") {} return true; } // Zhang xiaozhu Dan Fonction getAllChildRennodes (Treenode, result) {// var sttrSult = result; if (Treenode.isparent) {var ChildrenNodes = Treenode.children; if (ChildrenNodes) {for (var i = 0; i <ChildrenNodes.length; i ++) {Result + = ',' + ChildrenNodes [i] .id; }}} Retour Résultat; } $ (document) .ready (function () {var treeoBj = $ ("# triedemo"); $ .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 ordinaire", "Segoe" Symbole "," 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 #eeee solide} .ztree li a: hover {text-decoration: aucun; Background-Color: # e7e7e7;} / * .ztree li a span.button.switch {Visibility: Hidden} * / .ztree.showicon li a span.button.switch {visibilité: visible} .ztree li a.curselectedNode {background-Color: # d4d4d4; border: 0; height: 30px;}. {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; hauteur: 20px} .ztree li span.button.switch.level1 {width: 20px; Hauteur: 20px} .ztree li span.button.noline_open {fond de position: 0 0;} .ztree li span.button.noline_close {backgroundsposition: -18px 0;} .ztree li span.button.noline_open.level0 {background-position: 0 -18px;} .ztree li li li li span.button.noline_close.Level0 {Background Position: -18px -18px;} </ style> </ head> <body> <div data-role = "page" id = "usermain"> <v> <ul id = "triedemo"> </ul> </v> </ div> <pander id = "znodes"> </ span> 3. Résumé
La fonction du carnet d'adresses n'est pas aussi difficile que l'imaginaire. La structure des arbres adopte le cadre Ztree. Les données trouvées en arrière-plan doivent être converties en nom défini par Ztree. Ensuite, l'affichage et la requête de la liste des membres du département sont utilisés pour afficher et interroger le mobile jQuery. Dans les futurs articles, l'utilisation de ce JS sera introduite. D'après le nom, nous savons qu'il est spécialement développé pour les pages mobiles.
Ce qui précède est tout le contenu de cet article. J'espère que cela sera utile à l'apprentissage de tous et j'espère que tout le monde soutiendra davantage Wulin.com.