ฟังก์ชั่นการแชทได้รับการแนะนำในบทความก่อนหน้าและที่นี่เราแนะนำวิธีการใช้สมุดที่อยู่ ก่อนอื่นคุณต้องโหลดทุกแผนกของ บริษัท และโครงสร้างต้นไม้จากนั้นคลิกเพื่อป้อนรายชื่อบุคลากรของแผนกคลิกเพื่อดูข้อมูลโดยละเอียด
1. อินเทอร์เฟซ
โครงสร้างต้นไม้ของแผนก บริษัท :
รายชื่อสมาชิกแผนก:
รายละเอียดส่วนบุคคล:
2. การใช้งานรหัส
1. เครื่องควบคุม
/*** รายการแผนกโหลด*/@requestmapping ("/addresslistdepartmentjsp.do") โมฆะสาธารณะที่อยู่ที่อยู่ต่างๆ Response.Setcharacterencoding ("UTF-8"); รายการ <JsonTree> jslist = addressListService.getTree (); jsonArray jsonarray = jsonarray.fromobject (jslist); PrintWriter out = response.getWriter (); out.print (jsonarray); }/*** โหลดรายชื่อสมาชิกแผนก*/@requestmapping ("/addresslistuserlist.do") สตริงสาธารณะ addressListuserList (คำขอ httpservletRequest, httpservletResponse การตอบสนอง) โยน unsupportencodexception Response.Setcharacterencoding ("UTF-8"); String deptid = request.getParameter ("แผนก"); String d = request.getParameter ("DepartmentName"); String DepartmentName = สตริงใหม่ (D.GetBytes ("ISO-8859-1"), "UTF-8"); รายการ <ererDetail> userDetail = addressListService.getUserDetail (deptId); request.setAttribute ("userdetail", userdetail); request.setAttribute ("DepartmentName", DepartmentName); กลับ "addresslistuserlist"; }/*** ดูรายละเอียดพนักงาน*/@requestmapping ("/addresslistuserinfo.do") สตริงสาธารณะที่อยู่ที่อยู่ที่อยู่ต่างๆ Response.Setcharacterencoding ("UTF-8"); สตริง n = request.getParameter ("ชื่อ"); ชื่อสตริง = สตริงใหม่ (n.getBytes ("ISO-8859-1"), "UTF-8"); String mobile = request.getParameter ("มือถือ"); string email = request.getParameter ("อีเมล"); สตริง weixinid = request.getParameter ("weixinid"); string avatar = request.getParameter ("Avatar"); String d = request.getParameter ("DepartmentName"); String DepartmentName = สตริงใหม่ (D.GetBytes ("ISO-8859-1"), "UTF-8"); request.setAttribute ("ชื่อ", ชื่อ); request.setAttribute ("มือถือ", มือถือ); request.setAttribute ("อีเมล", อีเมล); request.setAttribute ("weixinid", weixinid); request.setAttribute ("Avatar", Avatar); request.setAttribute ("DepartmentName", DepartmentName); return "addresslistuserinfo"; - 2.Serviceimpl
/*** รายการแผนกโหลด*/รายการสาธารณะ <JsonTree> getTree () {// 1 รับโทเค็นสตริง AccessToken = Commonutil.getAccessToken ("WXE510946434680DAB", "EWTAHO766INVP4E1MCSZ1MHYUT2DALEB62REQ3VSFIZHY4VTMWZPKWEUXUVEVAUVEVAUVEVAUVEVAUVEVAUVEAF33G0") // 2. รับรายการรายชื่อแผนก <erection> DepartmentList = AdvancedUtil.getDepartment (AccessToken); // แปลงเป็นรูปแบบที่ต้องการโดยหน้าตามรายการรายชื่อแผนก <JsonTree> jslist = this.ConvertList (แผนก); กลับ jslist; } / *** แปลงเป็นรูปแบบ ztree* / รายการสาธารณะ <JsonTree> convertList (รายการ <erection> แผนก) {รายการ <JsonTree> rootNode = new ArrayList <JsonTree> (); สำหรับ (int i = 0; i <DepartmentList.size (); i ++) {สำหรับ (int j = i+1; j <แผนก. size (); j ++) {ถ้า (แผนก (i). getId () == แผนก (j) .getParentId () jt.setId (DepartmentList.get (i) .getId ()); jt.setName (DepartmentList.get (i) .getName ()); jt.setPid (DepartmentList.get (i) .getParentId ()); JT.SetOpen (เท็จ); jt.seturl (""); rootnode.add (JT); หยุดพัก; } 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 (เท็จ); jt.seturl ("addresslistuserlist.do?departmentId ="+DepartmentList.get (i) .getId ()+"& DepartmentName ="+DepartmentList.get (i) .getName ()); rootnode.add (JT); หยุดพัก; }}} ส่งคืน rootNode; } /*** โหลดรายชื่อสมาชิกแผนก* /รายการสาธารณะ <EserDetail> GetUserDetail (String DeptId) {// 1 รับโทเค็นสตริงแรก AccessToken = Commonutil.GetAccessToken ("WXE510946434680DAB", "EWTAHO766INVP4E1MCSZ1MHYUT2DALEB62REQ3VSFIZHY4VTMWZPKWEUXUVEVEVEVEAUN3 // 2. รับรายชื่อสมาชิกแผนกตาม ID แผนกและรายการค่าโทเค็น <ererDetail> userDetail = AdvancedUtil.getUserDetail (AccessToken, DeptId); ส่งคืนผู้ใช้ - 3. เครื่องมือ
// รับรายชื่อแผนกสาธารณะรายการคงที่ <erection> getDepartment (String AccessToken) {รายการ <erection> DepartmentList = NULL; // https://qyapi.weixin.qq.com/cgi-bin/department/list?access_token=access_token requesturl = "https://qyapi.weixin.qq.com/cgi-bin/department/list?access requestUrl = requestUrl.replace ("access_token", AccessToken); jsonObject jsonObject = conmonutil.httpsrequest (requesturl, "get", null); if (null! = jsonObject) {ลอง {แผนก = jsonarray.tolist (jsonobject.getjsonarray ("แผนก"), แผนก. class); } catch (jSonexception e) {DepartmentList = null; int errorCode = jsonObject.getInt ("errCode"); String errormsg = jsonobject.getString ("errmsg"); }} Return DepartmentList; } // รับรายละเอียดของสมาชิกแผนกสาธารณะรายการคงที่ <SuserDetail> getUserDetail (String AccessToken, String DepartmentID) {รายการ <SuserDetail> 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 = conmonutil.httpsrequest (requesturl, "get", null); if (null! = jsonObject) {ลอง {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 = {view: {showline: false, showicon: false, selectedMulti: false, dblclickexpand: false, adddiydom: adddiydom}, ข้อมูล: {simpledata: {enable: true}}, callback: {beforeclick: beforeclick}; var znodes = null; $ .ajax ({type: "post", async: false, url: "addresslistdepartmentjsp.do", ความสำเร็จ: ฟังก์ชั่น (data) {znodes = evaln ('(' + data + ')');}, ข้อผิดพลาด: ฟังก์ชั่น (data) {}}); ฟังก์ชั่น 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); }} ฟังก์ชั่น 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); กลับเท็จ; } if (str == "") {} ส่งคืนจริง; } // Zhang Xiaozhu Dan ฟังก์ชั่น getallChildrennodes (treenode, ผลลัพธ์) {// var strresult = ผลลัพธ์; if (treenode.isparent) {var childrennodes = treenode.children; if (เด็ก ๆ ) {สำหรับ (var i = 0; i <childrennodes.length; i ++) {result += ',' +childrennodes [i] .id; }}} ผลการส่งคืน; } $ (เอกสาร) .ready (ฟังก์ชั่น () {var treeobj = $ ("#treedemo"); $ .fn.ztree.init (treeobj, การตั้งค่า, znodes); ztree_menu = $ .fn.ztree.getztreeobj ("treeedemo"); ztree_menu.getNodes () [0]. เด็ก [0]. เด็ก [0]; ztree_menu.selectnode (curmenu); treeobj.removeclass ("showicon"); </script> <style type = "text/css"> .ztree * {font-size: 13pt; font-family: "Microsoft yahei", Verdana, simsun, "segoe ui web light", "segoe ui ui ui ui ui สัญลักษณ์ "," Helvetica neue ", Arial}. ztree li ul {margin: 0; Padding: 0} .ztree li {line-height: 30px;}. ztree li a {width: 100%; ความสูง: 30px; padding-top: 0px; ขอบล่าง: 1px #eeeee solid} .ztree li a: โฮเวอร์ พื้นหลังสี: #e7e7e7;}/ *. ztree li a span.button.switch {การมองเห็น: ซ่อน} */ .ztree.showicon li a span.button.switch {การมองเห็น: มองเห็นได้}. {line-height: 30px;} .ztree li span.button {margin-top: -7px;}. ztree li span.button.switch {ความกว้าง: 16px; ความสูง: 16px;} {background-image: url ("images/left_menuforoutlook.png"); *พื้นหลัง-ภาพ: url ("./ left_menuforoutlook.gif")} .ztree li span.button.switch.level0 {width: 20px; ความสูง: 20px} .ztree li span.button.switch.level1 {width: 20px; ความสูง: 20px}. ztree li span.button.noline_open {ตำแหน่งพื้นหลัง: 0 0;}. ztree li span.button.noline_close {ตำแหน่งพื้นหลัง: -18px 0;} span.button.noline_close.level0 {ตำแหน่งพื้นหลัง: -18px -18px;} </style> </head> <body> <div data -Role = "page" id = "usermain"> <div> <ul id = "Treedemo"> </ul> 3. สรุป
ฟังก์ชั่นสมุดที่อยู่นั้นไม่ยากอย่างที่จินตนาการ โครงสร้างต้นไม้ใช้กรอบ ztree ข้อมูลที่พบในพื้นหลังจะต้องแปลงเป็นชื่อที่กำหนดโดย ztree จากนั้นการแสดงผลและการสืบค้นของรายชื่อสมาชิกแผนกจะใช้เพื่อแสดงและสอบถาม JQuery Mobile ในบทความในอนาคตการใช้ JS นี้จะได้รับการแนะนำ จากชื่อเรารู้ว่ามันได้รับการพัฒนาเป็นพิเศษสำหรับหน้ามือถือ
ข้างต้นเป็นเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการเรียนรู้ของทุกคนและฉันหวังว่าทุกคนจะสนับสนุน wulin.com มากขึ้น