チャット関数は前の記事で紹介されました。ここでは、アドレス帳の実装方法を紹介します。まず、会社のすべての部門とツリー構造をロードし、クリックして部門の人事リストを入力する必要があります。クリックして詳細情報を表示します。
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をもっとサポートすることを願っています。