Функция чата была введена в предыдущей статье, и здесь мы представляем, как реализована адресная книга. Во -первых, вам необходимо загрузить все отделы компании и структуру дерева, затем нажмите, чтобы ввести список сотрудников департамента, нажмите, чтобы просмотреть подробную информацию.
1. Интерфейс
Структура дерева отдела компании:
Список членов отдела:
Личные данные:
2. Реализация кода
1. Контроллер
/*** Список отделов загрузки*/@requestmapping ("/addresslistdepartmentjsp.do") public addresslistmentdepartment (httpservlectrequest, httpservletresponse response) throws ioexception {request.setcharacterencoding ("utf-8"); response.setcharacterencoding ("UTF-8"); Список <jsontree> jslist = addresslistservice.gettree (); Jsonarray jsonarray = jsonarray.fromobject (jslist); Printwriter Out = response.getWriter (); out.print (jsonarray); }/*** Загрузите список членов отдела*/@Requestmapping ("/addrestlistuserlist.do") public String addrestuserlist (httpservletrequest, httpservletresponse response) throws unsupportedencodingexception {request.setcharacterencyning ("utf-8"); response.setcharacterencoding ("UTF-8"); String deptId = request.getParameter ("DepartyId"); String d = request.getParameter ("Департамент"); String DepartmentName = new String (D.GetBytes ("isO-8859-1"), "UTF-8"); Список <userDetail> userDetail = addresslistservice.getUserDetail (depTID); request.setattribute ("userdetail", userdetail); request.setAttribute ("Департамент", DepartmentName); вернуть "AddrestIlseSerlist"; }/*** Просмотреть данные сотрудника*/@Requestmapping ("/addrestlistuserInfo.do") public String addrestuserInfo (httpservlectrequest, httpservletresponse response) throws unsupportedencodingexception {request.setcharacterencing ("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 ("Департамент"); String DepartmentName = new String (D.GetBytes ("isO-8859-1"), "UTF-8"); request.setattribute ("name", name); request.setattribute ("Mobile", Mobile); request.setattribute ("email", электронная почта); request.setattribute ("weixinid", weixinid); request.setattribute ("avatar", avatar); request.setAttribute ("Департамент", DepartmentName); вернуть "AddrestIlseSerinfo"; } 2.serviceimpl
/*** Список отделов загрузки*/public list <jsontree> getTree () {// 1. Получить токен string accesstoken = commonutil.getAccesstoken ("wxe510946434680dab", "ewtaho766invp4e1mcsz1mhyut2daleb62req3vsfizhy4vtmwzpkweuxuvh33g0"). Getaccessoken ();); // 2. Получить список списков департаментов <Департамент> Департамент списка = AdvancedTil.getDepartment (AccessToken); // конвертируется в формат, требуемый страницей в соответствии со списком списков департаментов вернуть jslist; } / *** Конвертировать в Ztree Format* / public List <jsontree> convertlist (list <Department> Departlist) {list <jsontree> rootnode = new arraylist <jsontree> (); for (int i = 0; i <department.size (); i ++) {for (int j = i+1; j <departlist.size (); j ++) {if (departlist.get (i) .getId () == departlist.get (j) .getParentid ()) {jsontree jt = new jsontree (); jt.setid (departlist.get (i) .getid ()); jt.setname (departlist.get (i) .getName ()); jt.setpid (departlist.get (i) .getparentid ()); jt.setopen (false); jt.seturl (""); rootnode.add (jt); перерыв; } else {jsontree jt = new jsontree (); jt.setid (departlist.get (i) .getid ()); jt.setname (departlist.get (i) .getName ()); jt.setpid (departlist.get (i) .getparentid ()); jt.setopen (false); jt.seturl ("addrestuserlist.do?departmentId ="+departlist.get (i) .getId ()+"& departname ="+departlist.get (i) .getName ()); rootnode.add (jt); перерыв; }}} return rootnode; } /*** Загрузите список членов отдела* /public list <userDetail> getUserDetail (String deptId) {// 1. Получить токен первую строку accesstoken = commonutil.getaccesstoken ("wxe510946434680dab", "ewtaho766invp4e1mcsz1mhyut2daleb62req3vsfizhy4vtmwzpkwexuvh33g0") // 2. Получить список членов отдела на основе идентификатора отдела и списка значений токенов <userdetail> userDetail = advancedUtil.getUserDetail (accessToken, deptId); вернуть userdetail; } 3. Инструменты
// Получение списка отделений общественного статического списка <Департамент> getDepartment (string accessToken) {list <Департамент> Департамент списка = 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 {departlist = jsonarray.tolist (jsonobject.getjsonarray ("Департамент"), департамент.class); } catch (jsonexception e) {departslist = null; int errorCode = jsonObject.getInt ("ErrCode"); String errorrmsg = jsonObject.getString ("errmsg"); }} return DepartmentList; } // Получите информацию об общественном статическом списке члена отдела <userDetail> getUserDetail (string accessToken, string department) {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", departyid); 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 errorrmsg = jsonObject.getString ("errmsg"); }} return userdetail; } 4.JS
<script type = "text/javascript"> var curmenu = null, ztree_menu = null; var suture = {view: {showline: false, showicon: false, selectedmulti: false, dblclickexpand: false, adddiydom: adddiydom}, data: {simpledata: {enable: true}}, обратный вызов: {beforeclick: beforeclick}}; var znodes = null; $ .ajax ({type: "post", async: false, url: "addrestlistdepartmentjsp.do", успех: function (data) {znodes = eval ('(' + data + ')');}, ошибка: function (data) {}}); Функция addDiydom (treeId, treeNode) {var spacewidth = 5; var switchObj = $ ("#" + treeNode.tid + "_switch"), icoobj = $ ("#" + treeNode.tid + "_ico"); SwitchObj.remove (); icoobj.fefore (switchObj); if (treeNode.level> 1) {var sopacestr = "<span style = 'display: inline block; width:" + (spacewidth * treeNode.level) + "px'> </span>"; SwitchObj.fore (Spacestr); }} функция 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 ("triedemo"); ztree.expandNode (TreeNode); вернуть ложь; } if (str == "") {} return true; } // Zhang xiazhu dan function getallchildrennodes (treenode, result) {// var strresult = result; if (treenode.isparent) {var kidsnodes = treeNode.children; if (childrennodes) {for (var i = 0; i <childrennodes.length; i ++) {result += ',' +childrennodes [i] .id; }}} return result; } $ (document) .ready (function () {var treeObj = $ ("#triedemo"); $ .fn.ztree.init (treeobj, setting, znodes); ztree_menu = $ .fn.ztree.getztreeobj ("triedemo"); 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 ui ui rege ui ui ui ui ui ui ui ui ui ui ui ui ui ui ui ui ui ui ui ui ui ui ui ui ui ui ui ui. Symbol »," helvetica neue ", arial} .ztree li ul {margin: 0; Padding: 0} .ztree li {line-hight: 30px;} .ztree li a {width: 100%; высота: 30px; padding-top: 0px; пограничный пакет: 1px #eeeee solid} .ztree li a: hover {text-decoration: none; фоновый цвет: #e7e7e7;}/ * .ztree li a span.button.switch {visebility: hidden} */ .ztree.showicon li span.button.switch {видимость: видимый} .ztree li a.curselectednode {фоновый цвет: #d4d4d4; {Line-Height: 30px;} .ztree li span.button {margin-top: -7px;} .ztree li span.button.switch {width: 16px; высота: 16px;} .ztree li a.level0 span {font-size: 150%; font-weelt: bolde;}. {founal-image: url ("Images/leat_menuforoutlook.png"); *Facking-Image: url ("./ LEATE_MENUFOROUTLOOK.GIF")} .Ztree li span.button.switch.level0 {width: 20px; Высота: 20px} .ztree li span.button.switch.level1 {ширина: 20px; Высота: 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 {founal-Position: 0 -18px; span.button.noline_close.level0 {background -position: -18px -18px;} </style> </head> <body> <div Data -role = "page" id = "usermain"> <viv> <ul id = "triedemo"> </ul> </div> </div> <span = "znodes"> </ul> </div> </div> <span = "div> </ul> </div> </div> <pan> </div> </ul> </div> </div> <span =" 3. Резюме
Функция адресной книги не так сложна, как воображается. Структура дерева принимает структуру Ztree. Данные, найденные на фоне, должны быть преобразованы в имя, определенное Ztree. Затем дисплей и запрос списка членов отдела используются для отображения и запроса jQuery Mobile. В будущих статьях будет представлено использование этого JS. От имени мы знаем, что он специально разработан для мобильных страниц.
Выше всего содержание этой статьи. Я надеюсь, что это будет полезно для каждого обучения, и я надеюсь, что все будут поддерживать Wulin.com больше.