チャット関数は前の記事で紹介されました。ここでは、アドレス帳の実装方法を紹介します。まず、会社のすべての部門とツリー構造をロードし、クリックして部門の人事リストを入力する必要があります。クリックして詳細情報を表示します。
1。インターフェイス
会社部門の樹木構造：
部門メンバーリスト：
個人情報：
2。コード実装
1.コントローラー
/***ロード部門リスト*/@RequestMapping（ "/addressListDepartmentJsp.do"）public void addressListDepartment（httpservletRequest request、httpservletResponse応答）IoException {request.setcharacterencoding（ "utf-8"）; Response.setcharacterencoding（ "utf-8"）; List <JSonTree> jslist = addressListService.getTree（）; jsonarray jsonarray = jsonarray.fromobject（jslist）; printwriter out = response.getWriter（）; out.print（jsonarray）; }/***部門メンバーリストをロード*/@RequestMapping（ "/addressListuserList.do"）public string addressListuserList（httpservletrequest request、httpservletResponse応答）は、unpportedencodingception {request.setcharacterencoding（ "utf-8"）; Response.setcharacterencoding（ "utf-8"）; string deptid = request.getParameter（ "DepartmentId"）;文字列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）; "addresslistuserlist"を返します。 }/***従業員の詳細を表示*/@RequestMapping（ "/addressListuserInfo.do"）public string addressListuserInfo（httpservletrequest request、httpservletResponse応答）は、unsupportedEncodingception {request.setcharacterencoding（ "utf-8"）; Response.setcharacterencoding（ "utf-8"）;文字列n = request.getParameter（ "name"）; string name = new String（n.getBytes（ "ISO-8859-1"）、 "utf-8"）; string mobile = request.getParameter（ "Mobile"）;文字列email = request.getParameter（ "email"）; string weixinid = request.getParameter（ "weixinid"）; string avatar = request.getParameter（ "avatar"）;文字列d = request.getParameter（ "DepartmentName"）; string departmentName = new String（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）; "addresslistuserinfo"を返します。 } 2.ServiceImpl
/***ロード部門リスト*/public List <JSonTree> getTree（）{// 1。トークン文字列AccessToken = commonutil.getaccestoken（ "wxe5109464434680dab"、 "ewtaho76666666662req3vsfizhy4vvtmwzpkweuxuvh33g0"）。 // 2。 Department List <Department> DepartmentList = advancedutil.getDepartment（AccessToken）を取得します。 //部門リストに従ってページで必要なフォーマットに変換<JSONTREE> jsList = this.ConvertList（departmentList）; jslistを返します。 } / *** ztree形式に変換* / public list <jsontree> convertlist（list <pertaminal> departmentlist）{list <Jsontree> rootnode = new ArrayList <JSonTree>（）; 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）;壊す; } 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（false）; jt.seturl（ "addresslistuserlist.do?departmentid ="+departmentlist.get（i）.getid（）+"＆departmentname ="+departmentlist.get（i）.getname（））; rootnode.add（jt）;壊す; }}} rootnode; } /***部門メンバーリストをロード* /public List <UserDetail> getUserDetail（String Deptid）{// 1。トークンの最初の文字列AccessToken = commonutil.getaccestoken（ "wxe510946434680dab"、 "ewtaho7666invp4e1mcsz1mhyut2daleb62req3vsfizhy4vtmwzpkweuxuvh3g0"）。 // 2。部門IDおよびトークン値に基づいて部門のメンバーリストを取得<userdetail> userdetail = advancedutil.getuserdetail（accesstoken、deptid）; userdetailを返します。 } 3。ツール
//部門リストを取得しますpublic static list <pertaminal> 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.qqc.com/cgi-bin/department/list？ requesturl = requesturl.replace（ "access_token"、accesstoken）; jsonobject jsonobject = commonutil.httpsRequest（requesturl、 "get"、null）; if（null！= jsonobject）{try {departmentlist = jsonarray.tolist（jsonobject.getjsonarray（ "department"）、department.class）; } catch（jsonexception e）{departmentlist = null; int errorcode = jsonobject.getint（ "errcode"）; string errormsg = jsonobject.getString（ "errmsg"）; }} return digtamentlist; } //部門メンバーの詳細を取得しますpublic static list <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）{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、selectedmulti：false、dblclickexpand：false、adddiydom：adddiydom}、data：{simpledata：{enable：true}}、{beforeclick：beforeclick}}; var znodes = null; $ .ajax（{type： "post"、async：false、url： "addresslistdepartmentjsp.do"、success：function（data）{znodes = eval（ '（' + data + '）'）;}、error：function（data）{}}）;関数adddiydom（treeid、treenode）{var spacewidth = 5; var switchobj = $（ "＃" + treenode.tid + "_switch"）、icoobj = $（ "＃" + treenode.tid + "_ico"）; switchobj.remove（）; icooobj.before（switchobj）; if（treenode.level> 1）{var spacestr = "<span style = 'display：inline-block; width：" +（spacewidth * treenode.level） + "px'> </span>"; switchobj.before（spacestr）; }} function 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）; falseを返します。 } if（str == ""）{} return true; } // Zhang Xiaozhu dan関数getallchildrennodes（treenode、result）{// var stresult = result; if（treenode.isparent）{var childrennodes = treenode.children; if（childrennodes）{for（var i = 0; i <childrennodes.length; i ++）{result += '、' +childrennodes [i] .id; }}} return result; } $（document）.ready（function（）{var treeobj = $（ "＃treedemo"）; $ .fn.ztree.init（treeobj、setting、znodes）; ztree_menu = $ .fn.ztree.gettreeobj（ "treedemo"）; ztree_menu.getnodes（）[0] .children [0]; treeobj.RemoveClass（ "Showicon"）; </script> <style type = "text/css"> .ztree * {font-size：13pt; font-family： "Microsoft yahei"、verdana、simsun、 "segoe ui light"、 "segoe ui light"、 "segoe ui remollive"、 "segoe ui"、 "segoe ui"、 "シンボル "、" helvetica neue "、arial}。ztree li ul {margin：0;パディング：0} .ztree li {line-height：30px;} .ztree li a {width：100％; height：30px; padding-top：0px; border-bottom：1px #eeee solid} .ztree li a：hover {text-decoration：none;バックグラウンドカラー：＃e7e7e7;}/ *。ztree li a span.button.switch {visibility：hisdibility} */。ztree.showicon li a span.button.switch {visibility：visible：visible} .ztree li a.cureselectednode {background-color：＃d4d4; {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％; fonteight;} {background-image：url（ "images/left_menuforoutlook.png"）; *background-image：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 {background-position：0 -18px; span.button.noline_close.level0 {background -position：-18px -18px;} </style> </head> <body> <div data -role = "page" id = "usermain"> <ul id = "treedemo"> </ul> </div> div> <span </</</</</> </> </</> < 3。概要
アドレス帳の機能は、想像ほど難しくありません。ツリー構造はZtreeフレームワークを採用しています。バックグラウンドで見つかったデータは、Ztreeで定義された名前に変換する必要があります。次に、部門メンバーリストの表示とクエリを使用して、jQueryモバイルを表示および照会します。将来の記事では、このJSの使用が導入されます。名前から、モバイルページ用に特別に開発されていることがわかります。
上記はこの記事のすべての内容です。みんなの学習に役立つことを願っています。誰もがwulin.comをもっとサポートすることを願っています。