Fungsi obrolan diperkenalkan di artikel sebelumnya, dan di sini kami memperkenalkan bagaimana buku alamat diimplementasikan. Pertama, Anda perlu memuat semua departemen perusahaan dan struktur pohon, lalu klik untuk memasukkan daftar personel departemen, klik untuk melihat informasi terperinci.
1. Antarmuka
Struktur Pohon Departemen Perusahaan:
Daftar Anggota Departemen:
Detail Pribadi:
2. Implementasi Kode
1.Controller
/*** Daftar Pemuatan Departemen*/@RequestMapping ("/AddressListDepartmentJsp.do") public void addresslistDepartment (permintaan httpservletRequest, httpservletResponse response) melempar ioException {request.setcharacterenceDing ("utf-8"); response.setcharacterencoding ("UTF-8"); Daftar <jshontree> jslist = addresslistService.gettree (); Jsonarray jsonarray = jsonarray.fromObject (jslist); Printwriter out = response.getWriter (); out.print (jsonarray); }/*** Muat Daftar Anggota Departemen*/@RequestMapping ("/addresslistuserList.do") Public String AddressListUserList (httpservletRequest, httpservletResponse response) melempar UnsupportedEncodingException {request.setcharacterenceDing ("UTF-8");); response.setcharacterencoding ("UTF-8"); String deptid = request.getParameter ("DepartmentId"); String d = request.getParameter ("DepartmentName"); String departmentName = string baru (d.getbytes ("iso-8859-1"), "UTF-8"); Daftar <UserDetail> userDetail = addresslistService.getUserDetail (deptid); request.setAttribute ("userDetail", userDetail); request.setAttribute ("DepartmentName", DepartmentName); mengembalikan "addressListUserList"; }/*** Lihat detail karyawan*/@RequestMapping ("/addresslistuserInfo.do") Public String addressListuserInfo (httpservletRequest, httpservletResponse response) lemparan unsupportedencodingException {request.setcharacterencoding) ("" UNSETCODING ("" 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 ("seluler"); String email = request.getParameter ("email"); String weixinid = request.getParameter ("weixinid"); String avatar = request.getParameter ("avatar"); String d = request.getParameter ("DepartmentName"); String departmentName = string baru (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); mengembalikan "addresslistuserInfo"; } 2.ServiceImpl
/*** Muat daftar departemen*/Daftar Publik <JshonTree> gettree () {// 1. Dapatkan token string accessToken = commonutil.getAccessToken ("wxe510946434680dab", "ewtaho766invp4e1mcsz1mhyut2daleb62req3vsfizhy4vtmwzpkweuxuuxuvh33g0"). // 2. Dapatkan daftar daftar departemen <partegent> DepartmentList = Advancedutil.getDepartment (AccessToken); // Konversi ke format yang diperlukan oleh halaman sesuai dengan daftar daftar departemen <jshontree> jslist = this.convertList (DepartmentList); mengembalikan jslist; } / *** Konversi ke format Ztree* / Daftar Publik <JshonTree> ConvertList (Daftar <Septordes> DepartmentList) {Daftar <JshonTree> rootnode = ArrayList baru <JshonTree> (); 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); merusak; } else {jShonTree jt = new jShontree (); 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); merusak; }}} return rootnode; } /*** Muat daftar anggota departemen* /Daftar publik <UserDetail> getUserDetail (String deptid) {// 1. Dapatkan token string pertama AccessToken = commonutil.getAccessToken ("wxe510946434680dab", "ewtaho766invp4e1mcsz1mhyut2daleb62req3vsfizhy4vtmwzpkweuxuuxuvh33g0"). // 2. Dapatkan Daftar Anggota Departemen berdasarkan ID Departemen dan Daftar Nilai Token <UserDetail> UserDetail = Advancedutil.getUserDetail (AccessToken, Deptid); kembalikan userDetail; } 3. Alat
// Dapatkan Daftar Departemen Daftar Statis Publik <Partes> 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_tokes.qq.com/cgi-bin/department/list?access_tokes.qq.com requestUrl = requestUrl.replace ("access_token", accessToken); JsonObject jsonObject = commonutil.httpsRequest (requestUrl, "get", null); if (null! = jsonObject) {coba {departmentList = jsonarray.tolist (jsonobject.getjsonArray ("department"), department.class); } catch (jsonexception e) {departmentList = null; int errorCode = jsonobject.getInt ("errcode"); String errorrormsg = jsonobject.getString ("errmsg"); }} return DepartmentList; } // Dapatkan rincian Daftar Statis Publik Anggota Departemen <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) {coba {userDetail = jsonarray.tolist (jsonobject.getjsonArray ("userlist"), userDetail.class); } catch (jsonexception e) {userDetail = null; int errorCode = jsonobject.getInt ("errcode"); String errorrormsg = jsonobject.getString ("errmsg"); }} return userDetail; } 4.js
<script type = "text/javascript"> var curmenu = null, ztree_menu = null; var pengaturan = {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: "ADVESTLISTDEPARTMENTJSP.DO", SUCCESS: FUNGSI (DATA) {ZnODES = eval ('(' + data + ')');}, kesalahan: fungsi (data) {}}); fungsi 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; lebar:" + (spacewidth * treenode.level) + "px'> </span>"; switchobj.before (Spacestr); }} function beForeClick (treeid, treenode) {var str = ''; str = getAllChildrennodes (Treeenode, str); if (str.substr (0,1) == ',') str = str.substr (1); if (str! = "") {treenode.url = ""; var ztree = $ .fn.ztree.getztreeobj ("treedemo"); ztree.expandnode (treenode); mengembalikan false; } if (str == "") {} return true; } // zhang xiaozhu dan fungsi getallchildrennodes (treenode, hasil) {// var strresult = hasil; if (treenode.isparent) {var childrennodes = treenode.children; if (childrennodes) {for (var i = 0; i <childrennodes.length; i ++) {result += ',' +childrennodes [i] .id; }}} hasil pengembalian; } $ (dokumen) .ready (function () {var treeobj = $ ("#treedemo"); $ .fn.ztree.init (Treeobj, Pengaturan, 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 Simbol "," helvetica neue ", arial} .ztree li ul {margin: 0; Padding: 0} .ztree li {line-height: 30px;} .ztree li a {width: 100%; tinggi: 30px; padding-top: 0px; border-bottom: 1px #eeeee solid} .ztree li a: hover {teks-dekorasi: tidak ada; latar belakang-warna: #e7e7e7;}/ * .ztree li a span.button.switch {visibilitas: tersembunyi} */ .ztree.showicon li a span.button.switch {visibilitas: visible} .ztree li A.CurselectedNode {latar belakang-warna: #d4d4; {line-height: 30px;} .ztree li span.button {margin-top: -7px;} .ztree li span.button.switch {width: 16px; tinggi: 16px;} .ztree li a.level0 span {font-SIZE: 150%; font-weight: {latar belakang-gambar: url ("gambar/left_menuforoutlook.png"); *latar belakang-gambar: url ("./ left_menuforoutlook.gif")} .ztree li span.button.switch.level0 {width: 20px; Tinggi: 20px} .ztree li span.button.switch.level1 {width: 20px; Tinggi: 20px} .ztree li span.button.noline_open {latar belakang-posisi: 0 0;} .ztree li span.button.noline_close {latar belakang-posisi: -18px 0;} .ztree Li span.button.noline_open.level0 {latar belakang-latar belakang: 0 -button. span.button.noline_close.level0 {latar belakang -posisi: -18px -18px;} </style> </head> <body> <div data = "page" id = "usermain"> <Div> <ul iD = "treedemo"> </ul> </div> </div> <Ul id = "zn span ="> </Ul> </div> </div> <span id = "zin"> </ul/</div> </div> </zin span = "zin"> </ul> </div> </div> <span id = "zin" zin "> </ul> </div> </div> </sPANT =" zN SPANED "> </Ul> </Div> </Div> </SPANED =" ZN SPANED " 3. Ringkasan
Fungsi buku alamat tidak sesulit yang dibayangkan. Struktur pohon mengadopsi kerangka kerja Ztree. Data yang ditemukan di latar belakang harus dikonversi menjadi nama yang ditentukan oleh Ztree. Kemudian tampilan dan permintaan daftar anggota departemen digunakan untuk menampilkan dan menanyakan ponsel jQuery. Dalam artikel mendatang, penggunaan JS ini akan diperkenalkan. Dari namanya, kita tahu bahwa itu dikembangkan secara khusus untuk halaman seluler.
Di atas adalah semua konten artikel ini. Saya berharap ini akan membantu untuk pembelajaran semua orang dan saya harap semua orang akan lebih mendukung wulin.com.