تم تقديم وظيفة الدردشة في المقالة السابقة ، وهنا نقدم كيفية تنفيذ دفتر العناوين. أولاً ، تحتاج إلى تحميل جميع أقسام الشركة وهيكل شجرة ، ثم انقر لإدخال قائمة موظفي القسم ، انقر لعرض المعلومات التفصيلية.
1. واجهة
هيكل الأشجار لقسم الشركة:
قائمة أعضاء القسم:
التفاصيل الشخصية:
2. تنفيذ الكود
1.Controller
/*** قائمة قسم التحميل*/REQUESTMAPPE ("/addressListDepartmentJsp.do") public void adlectdeplistment (طلب httpservletrequest ، httpservletresponse) يلقي ioException {request.setcharacterencoding ("UTF-8") ؛ استجابة. setcharacterencoding ("UTF-8") ؛ قائمة <jsontree> jslist = addressListService.getTree () ؛ jsonarray jsonarray = jsonarray.fromObject (jslist) ؛ printWriter out = response.getWriter () ؛ Out.print (jsonarray) ؛ }/*** قم بتحميل قائمة أعضاء القسم*/REQUESTMAPPE ("/addressListUserList.do") السلسلة العامة العنوان قائمة (طلب httpservletrequest ، httpservletresponse) يلقي unupportedencodingexception {request.setcharacterencoding ("UTF-8") ؛ استجابة. setcharacterencoding ("UTF-8") ؛ سلسلة السلسلة = request.getParameter ("DepartmentId") ؛ String d = request.getParameter ("DepartmentName") ؛ String DepartmentName = سلسلة جديدة (D.GetBytes ("ISO-8859-1") ، "UTF-8") ؛ قائمة <SerdDetail> userDetail = addressListservice.getUserDetail (DeptId) ؛ request.setattribute ("userDetail" ، userDetail) ؛ request.setattribute ("DepartmentName" ، DepartmentName) ؛ إرجاع "addressListUserList" ؛ }/*** عرض تفاصيل الموظف*/REQUESTMAPPE ("/addressistuserInfo.do") السلسلة العامة العنوان leadistuserInfo (طلب httpservletrequest ، httpservletsponse) يلقي unsupportedencodexception {request.setcharacterencoding ("utf-8") ؛ استجابة. setcharacterencoding ("UTF-8") ؛ String n = request.getParameter ("name") ؛ اسم السلسلة = سلسلة جديدة (N.GetBytes ("ISO-8859-1") ، "UTF-8") ؛ String mobile = request.getParameter ("mobile") ؛ سلسلة البريد الإلكتروني = request.getParameter ("البريد الإلكتروني") ؛ String 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 ("name" ، name) ؛ request.setattribute ("mobile" ، mobile) ؛ request.setAttribute ("البريد الإلكتروني" ، البريد الإلكتروني) ؛ request.setAttribute ("weixinid" ، weixinid) ؛ request.setattribute ("Avatar" ، Avatar) ؛ request.setattribute ("DepartmentName" ، DepartmentName) ؛ إرجاع "addressistuserInfo" ؛ } 2. ServiceImpl
/*** قائمة تحميل القائمة*/قائمة عامة <JsonTree> getTree () {// 1. الحصول على الرمز المميز accessToken = commonutil.getAccessToken ("WXE510946434680DAB" ، "EWTAHO766INVP4E1MCSZ1MHYUT2DALEB62REQ3VSFIZHY4VTMWZPKWEUXUVH33G0"). // 2. احصل على قائمة قائمة القسم <Repartment> Department = AdvancedUtil.getDepartment (AccessToken) ؛ // تحويل إلى التنسيق المطلوب من قبل الصفحة وفقًا لقائمة القسم <JsonTree> jslist = this.convertlist (DepartmentList) ؛ إرجاع jslist ؛ } / *** تحويل إلى تنسيق Ztree* / قائمة عامة <JsonTree> SenderList (قائمة <Repartment> DepartmentList) {list <JsonTree> rootnode = new ArrayList <JsonTree> () ؛ لـ (int i = 0 ؛ i <department.size () ؛ i ++) {for (int j = i+1 ؛ j <experentlist.size () ؛ j ++) {if (department.get (i) .getID () == interclist.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) ؛ استراحة؛ } آخر {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 ("addressListUserList.do؟departmentId ="+departmentlist.get (i) .getID ()+"& departmentName ="+departmentlist.get (i) .getName ()) ؛ rootnode.add (jt) ؛ استراحة؛ }}} routnode rootnode ؛ } /*** قم بتحميل قائمة أعضاء القسم* /قائمة عامة <SerdTail> getUserDetail (سلسلة السلسلة) {// 1. احصل على الرمز المميز للسلسلة الأولى AccessToken = commonutil.getAccessToken ("WXE510946434680DAB" ، "EWTAHO766INVP4E1MCSZ1MHYUT2DALEB62REQ3VSFIZHY4VTMWZPKWEUXUVH33G0"). // 2. احصل على قائمة أعضاء القسم بناءً على معرف القسم وقائمة القيم الرمزية <UserDetail> userDetail = AdvancedUtil.getuserDetail (AccessToken ، DeptId) ؛ إرجاع userDetail ؛ } 3. الأدوات
// احصل على قائمة القائمة الثابتة العامة <Repartment> getDepartment (String AccessToken) {List <Separtment> 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_token=access_token" ؛ requesturl = requesturl.replace ("Access_Token" ، AccessToken) ؛ jsonobject jsonobject = commonutil.httpsrequest (requesturl ، "get" ، null) ؛ if (null! = jsonobject) {try {department = jsonarray.toList (jsonobject.getjsonarray ("department") ، department.class) ؛ } catch (jsonexception e) {departmentlist = null ؛ int errorcode = jsonobject.getint ("errcode") ؛ String errormsg = jsonobject.getString ("errmsg") ؛ }} return departmentlist ؛ } // احصل على تفاصيل القائمة الثابتة للأعضاء العامة <SerdTail> getUserDetail (String AccessToken ، String DepartmentId) {list <SerdTail> userDetail = null ؛ 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) {try {userDetail = jsonarray.toList (jsonobject.getjsonarray ("userlist") ، userDetail.class) ؛ } catch (jsonexception e) {userDetail = null ؛ int errorcode = jsonobject.getint ("errcode") ؛ String errormsg = jsonobject.getString ("errmsg") ؛ }} إرجاع userDetail ؛ } 4.js
<script type = "text/javaScript"> var curmenu = null ، ztree_menu = null ؛ var setting = {view: {showline: false ، showicon: false ، selectmulti: false ، dblclickexpand: false ، adddiydom: adddiydom} ، data: {simpledata: {enable: true}} ، callback: {beforeclick: beforeclick}}} ؛ var Znodes = null ؛ $ .ajax ({type: "post" ، async: false ، url: "addressListDepartmentjsp.do" ، النجاح: الوظيفة (البيانات) {znodes = alual ('(' + 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 (Spacester) ؛ }} الدالة 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 == "") {} إرجاع true ؛ } // Zhang Xiaozhu dan function GetAllChildRenodes (treenode ، result) {// var strresult = result ؛ if (treenode.isparent) {var chirlsnodes = treenode.children ؛ if (kndringnodes) {for (var i = 0 ؛ i <Kidshnodes.Length ؛ i ++) {result += '،' +chirldnodes [i] .id ؛ }}} نتيجة الإرجاع ؛ } $ (document) .Ready (function () {var treeObj = $ ( ztree_menu.getnodes () [0]. TreeObj.Removeclass ("Showicon") ؛ </script> <style type = "text/css"> .ztree * {font-size: 13pt ؛ font-family: رمز "،" 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 #Eeeee Solid} .ztree li a: hover {text-decoration: none ؛ خلفية اللون: #e7e7e7 ؛}/ * .ztree li a span.button.switch {الرؤية: Hidden} */ .ztree.showicon li a span.button.switch {prosibility: Quactible} .ztree li a.curselectednode {background-color: #d4d4d4 ؛ {line-height: 30px ؛} .ztree li span.button {margin-top: -7px ؛} .ztree li span.button.switch {width: 16px ؛ height: 16px ؛} .ztree li {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 {background-position: 0 0 ؛} .ztree li span.button.noline_close {background-position: -18px 0 ؛} .ztree li span.button.noline_open.level0 span.button.noline_close.level0) 3. ملخص
وظيفة دفتر العناوين ليست صعبة كما يتخيل. يعتمد هيكل الشجرة إطار عمل Ztree. يجب تحويل البيانات الموجودة في الخلفية إلى الاسم المحدد بواسطة Ztree. ثم يتم استخدام العرض والاستعلام عن قائمة أعضاء القسم لعرض والاستعلام عن جوال jQuery. في المقالات المستقبلية ، سيتم تقديم استخدام JS هذا. من الاسم ، نعلم أنه تم تطويره خصيصًا لصفحات الهاتف المحمول.
ما سبق هو كل محتوى هذه المقالة. آمل أن يكون ذلك مفيدًا لتعلم الجميع وآمل أن يدعم الجميع wulin.com أكثر.