zTree的调用设使用（跨两个系统，两类技术实现的项目案例SpringMVC+Spring+MyBatis和Struts2+Spring+ibatis框架组合）
1、從zTree官網上下載zTree的包，zTree的官方網址是：http://www.ztree.me/v3/main.php#_zTreeInfo
2、引入zTree所需的依賴，例如(jQuery的js自己引入)：
| <%@ page language="java" import="java.util.*" pageEncoding="utf-8"%> <%@ include file="common/common.jsp"%> ? <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> ? <head> ??? <title>My JSP 'tree.jsp' starting page</title> ??? <link rel="stylesheet" type="text/css" href="${scriptsPath}/zTree/css/zTreeStyle/zTreeStyle.css"/> ?? <script type="text/javascript" src="${scriptsPath}/jQuery/jquery-1.11.3.min.js" charset="utf-8"></script> ?? <script type="text/javascript" src="${scriptsPath}/zTree/js/jquery.ztree.all-3.5.min.js"></script> ? </head> ? ? <body> ? ? <%--<div style="background:url('${imagesPath}/tree-icon/web.jpg') 0 0 no-repeat; width:100px; height:100px;"></div>--%> ? ? ? ? <input id="citySel" type="text" readonly value="" style="width:300px;" onclick="$.websiteChannel.showMenu(); return false;"/> ??? <div id="menuContent" class="menuContent" style="width:300px; height:500px; display:none; background:#EFEFEF;"> ????? <div id="treeDemo" class="ztree" style="margin-top:0; width:180px; height: 300px;"></div> ?? </div> ?? ?? <div id="chnlcode"></div> ?? <div id="sitecode"></div> ?? <div id="chnlid"></div> ?? <div id="nodePath"></div> ? ??? <!-- 站點欄目樹對應的js --> ?? <script type="text/javascript" src="${scriptsPath}/tpl/common/tree.js" charset="utf-8"></script> ? </body> </html> |
3、樹的tree.js。調用如下：
| $(function(){ ?? /* ?? ?* name?????? :Zuoquan Tu ?? ?* mail?????? :tuzq@XXXXXXX.cn ?? ?* date?????? :2015/11/25 ?? ?* version??? :1.0 ?? ?* description: ?? ?* CopyRight (C) 2015-11 ?? ?*/ ?? (function($){ ????? /** ????? ?* 添加一個站點欄目樹js對應的命名空間，避免污染其它地方的js ????? ?*/ ????? var targetObj = new Object; ????? var targetId = ''; ????? $.treeMb = { ???????? showMenu:function(input) { ??????????? targetObj = input; ??????????? targetId = $(input).attr("id"); ??????????? ??????????? var inputObj = $(input); ??????????? var inputOffset = $(input).position(); ??????????? //alert(inputOffset.top + "," + inputOffset.left); ??????????? $("#menuContent_mb").css({left:inputOffset.left + "px", top:inputOffset.top + inputObj.outerHeight() + "px"}).slideDown("fast"); ??????????? $("body").bind("mousedown", $.treeMb.onBodyDown); ??????????? ??????????? /**避免js內存溢出*/ ??????????? inputObj = null; ??????????? inputOffset = null; ???????? }, ???????? hideMenu:function() { ??????????? $("#menuContent_mb").fadeOut("fast"); ??????????? $("body").unbind("mousedown", $.treeMb.onBodyDown); ???????? }, ???????? onBodyDown:function(event) { ??????????? if (!(event.target.id == "menuBtn" || event.target.id == "menuContent_mb" || $(event.target).parents("#menuContent_mb").length>0)) { ??????????????? $.treeMb.hideMenu(); ??????????? } ???????? }, ???????? /** ???????? ?* 樹被點擊的時候執行的動作 ???????? ?*/ ???????? onClick:function(e, treeId, treeNode) { ??????????? var zTree = $.fn.zTree.getZTreeObj("treeDiv_mb"); ??????????? zTree.checkNode(treeNode, !treeNode.checked, null, true); ??????????? return false; ???????? }, ???????? /** ???????? ?* 樹被選中時執行的事件 ???????? ?*/ ???????? onCheck:function(e, treeId, treeNode) { ??????????? var zTree = $.fn.zTree.getZTreeObj("treeDiv_mb"), ??????????? nodes = zTree.getCheckedNodes(true), ??????????? chnlcodeValue = ""; ??????????? sitecodeValue = ""; ??????????? chnlidValue = ""; ??????????? nodePath = "";? //顯示建的專題位置,從"站點"-->"最后一個欄目"的路徑 ??????????? websiteId =""; ??????????? for (var i=0, length=nodes.length; i<length; i++) { ??????????????? chnlcodeValue += nodes[i].chnlcode + ","; ??????????????? sitecodeValue += nodes[i].sitecode + ","; ??????????????? chnlidValue += nodes[i].id + ","; ??????????? } ??????????? if (chnlcodeValue.length > 0 ) ??????????????? chnlcodeValue = chnlcodeValue.substring(0, chnlcodeValue.length-1); ??????????? if (sitecodeValue.length > 0 ) ??????????????? sitecodeValue = sitecodeValue.substring(0, sitecodeValue.length-1); ??????????? if (chnlidValue.length > 0 ) ??????????????? chnlidValue = chnlidValue.substring(0, chnlidValue.length-1); ??????????? ??????????? ??????????? var pathNodes = treeNode.getPath(); ??????????? websiteId = pathNodes[0].id; ??????????? for(var i = 0; i < pathNodes.length; i++) { ??????????????? nodePath += pathNodes[i].name + "/"; ??????????? } ??????????? ??????????? $("#chnlcode_mb").val(chnlcodeValue); ??????????? $("#chnlid_mb").val(chnlidValue); ??????????? $("#sitecode_mb").val(sitecodeValue); ??????????? $("#siteid_mb").val(websiteId); ??????????? $("#nodePath_mb").val(nodePath); ??????????? ??????????? $("#"+targetId).val(nodePath); ??????????? ?$("#"+targetId).trigger("blur"); ??????????? $("#menuContent_mb").hide(); ??????????? ??????????? chnlcodeValue = null; ??????????? sitecodeValue = null; ??????????? chnlidValue = null; ??????????? nodePath = null; ??????????? websiteId = null; ???????? }, ???????? /** ???????? ?* 樹被展開時執行的事件 ???????? ?*/ ???????? //onExpand(event,treeId,treeNode) { ???????? // alert(treeNode.tId + "," + treeNode.level + "," + treeNode.name); ???????? //} ????? }; ? ????? /** ????? ?* 站點欄目樹 ????? ?*/ ????? var setting = {// 欄目樹的配置 ???????? async : { ??????????? treeId:"website-channel-tree",//zTree 的唯一標識，初始化后，等于 用戶定義的 zTree 容器的 id屬性值 ??????????? enable : true,//設置zTree是否開啟異步加載模式 ??????????? //autoParam:["id","isSite"], ??????????? url : basePath + '/common/getWebsiteTree.action',//注意這里是調用后臺的邏輯 ?? ???????? // 提交的參數 ??????????? autoParam: ["id","pid"],//異步加載時需要自動提交父節點屬性的參數，這里的id，pid是傳遞給上面的getWebsiteTree的參數 ?? ??????????? dataFilter: function(treeId, parentNode, childNodes) { ?? ??????????????? if (!childNodes) return null; ?? ??????????????? for ( var i = 0, l = childNodes.length; i < l; i++) { ?? ??????? ???????? if (childNodes[i].isSite == 1) { ?? ??????? ??????????? childNodes[i].icon = "/app-tpl-webapp/images/tree-icon/web.jpg"; ?? ??????? ??????????? childNodes[i].iconOpen = "/app-tpl-webapp/images/tree-icon/web.jpg"; ?? ??????? ??????????? childNodes[i].iconClose = "/app-tpl-webapp/images/tree-icon/web.jpg"; ?? ??????? ???????? } else { ?? ??????? ??????????? childNodes[i].icon = "/app-tpl-webapp/images/tree-icon/channel.jpg"; ?? ??????? ??????????? childNodes[i].iconOpen = "/app-tpl-webapp/images/tree-icon/channel.jpg"; ?? ??????? ??????????? childNodes[i].iconClose = "/app-tpl-webapp/images/tree-icon/channel.jpg"; ?? ??????? ???????? } ?? ??????? ????? } ?? ??????????????? return childNodes; ?? ??????????? } ???????? }, ???????? callback: { ??????????? onCheck: $.treeMb.onCheck, //當樹被選中后執行的事件 ??????????? onClick: $.treeMb.onClick, //當樹被點擊后執行的事件 ??????????? onExpand:$.treeMb.onExpand //當樹被展開后執行的事件 ????? ??? }, ????? ??? check: { ??????????? enable: true, ??????????? chkStyle: "radio",????? //顯示的是radio ??????????? radioType: "all" ???????? }, ????? ??? data: { ????? ??????? simpleData: { ????? ??????? ?? enable: true, ????? ??????????? idKey: "id",???? //定義當前顯示的節點的id ????? ??????????? pIdKey: "pid",?? //通過定義這個id為了顯示層級結構，id代表的節點將在pid的下面。 ????? ??????????? rootPid: "rid",???? ?????//自己定義的 ????? ??????????? chnlcode: "chnlcode",?? //這里和json中的值相同 ????? ??????????? sitecode: "sitecode",?? //這里和json中的值相同 ????? ??????????? rootPId: 0??????????????? //開始的時候定義第一級節點的pid的值為0 ????? ??????? } ????? ??? }, ???????? view:{ ??????????? showIcon:true??? //讓圖標顯示 ???????? } ????? }; ? ??????? //若有多棵樹，要下面的id不同 ????? $.fn.zTree.init($("#treeDiv_mb"), setting); ????? ????? //避免js內存溢出 ????? setting = null; ?? })(jQuery); }); |
?4、使用到的json類似如下（只是調用的接口不一樣，json數據是一樣的）：
?5、要調用的后臺的寫法（下面的方式是通過Spring+SpringMVC+MyBatis的實現方式）：
| package com.ucap.tpl.controller.common; XXXXXXXXXX ; ? /** ?* CommonController.java 公用的Controller ?* @attention ?* @author toto ?* @date 2016-5-13 ?* @note begin modify by 涂作權 2016-5-13 原始創建 ?*/ @Controller @RequestMapping(value = "/common", ????????????? method = {RequestMethod.GET,RequestMethod.POST}) public class CommonController extends BaseController { ? ?????? /** ?????? ?* 獲得站點欄目樹 ?????? ?* @param request ?????? ?* @return ?????? ?* @attention ?????? ?* @author toto ?????? ?* @date 2016-5-13 ?????? ?* @note? begin modify by 涂作權 2016-5-13? 原始創建 ?????? ?*/ ?????? @RequestMapping(value="/getWebsiteTree") ?????? @ResponseBody ?????? public String getWebsiteTree(HttpServletRequest request,HttpServletResponse response, ???????????????????? String id,String pid) { ????????????? String websiteTree = null; ????????????? ????????????? //設置消息頭信息 ????????????? setResponeInfo(response); ????????????? ????????????? try { ???????????????????? websiteTree = websiteService.getWebsiteTree(getSessionUserId(request),id,pid); ????????????? } catch (Exception e) { ???????????????????? e.printStackTrace(); ????????????? } ????????????? ????????????? return websiteTree; ?????? } } |
6、要調用的第三方系統的接口寫法（注意下面的實現方式是Struts2+ibatis+Spring的實現方式）：
| 接口中的寫法： /** ?* 站點服務接口獲取站點列表和單個站點信息等。 ?* ?* @author toto ?* ?*/ @WebService public interface WebsiteService { ? /** ?? ?* 獲取站點欄目樹的信息 ?? ?*?? ?? ?* @param userId 用戶id ?? ?*/ ?? public String getWebsiteTree(String userId,String id,String pid); } |
| 實現的方式： @WebService(serviceName = "WebsiteService", endpointInterface = "com.ucap.wcm.WebsiteService") public class WebsiteServiceImpl extends LoadObjectSupport implements WebsiteService { ? /** ?? ?* 獲取站點欄目信息，用于專題 ?? ?* userId?????? :用戶名 ?? ?* id?????????? :點擊樹的時候，被點擊的站點或子站點或欄目的ID ?? ?* pid????????? :表示的是被點擊的樹節點的父節點的id ?? ?*/ ?? public String getWebsiteTree(String userId,String id,String pid) {????? ????? try { ???????? List<Map<String, Object>> treeNodeList = new ArrayList<Map<String, Object>>(); ???????? List<Website> siteList = new ArrayList<Website>(); ???????? //表示點擊的是最頂層的站點 ???????? if (Validator.isNotNull(userId) && Validator.isNull(id) && Validator.isNull(pid)) { ??????????? try { ??????????????? //獲取有權限的站點欄目樹?? true:表示的是只取其中一級 ??????????????? siteList = getWebsiteManager().findSubWebsitesByWebsiteId(userId, null, true, null); ??????????? } catch (WebContentManagementException e) { ??????????????? e.printStackTrace(); ??????????? } ??????????? if (!Validator.isEmpty(siteList)) { ??????????????? for (Website website : siteList) { ?????????????????? //1：未發布；2：已簽發；3：已發布；4：已刪除；5：欄目撤銷中；6：欄目發布失敗；7：欄目撤銷發布失敗；8：發布中； ?????????????????? //如果刪除了 ?????????????????? if ("4".equals(website.getStatus())) {continue;} ?????????????????? //只取已發布的 ??????????????? ?? //if(!"3".equals(website.getStatus())){continue;} ?????????????????? Map<String, Object> map = new HashMap<String, Object>(); ?????????????????? if (website.getCodeName().equals("default")) { ????????????????????? continue; ?????????????????? } ?????????????????? ?????????????????? map.put("id", website.getWebsiteId()); ?????????????????? map.put("name", website.getName()); ?????????????????? map.put("pid", website.getParentWebsiteId()); ?????????????????? map.put("isParent", true); ?????????????????? map.put("sitecode", website.getCodeName()); ?????????????????? map.put("isSite", 1); ?????????????????? map.put("icon", "images/web.jpg"); ?????????????????? map.put("iconOpen", "images/web.jpg"); ?????????????????? map.put("iconClose", "images/web.jpg"); ?????????????????? map.put("nocheck", "true"); ? ?????????????????? treeNodeList.add(map); ??????????????? } ??????????? } ???????? } else { ??????????? List<Channel> channles = null; ??????????? ??????????? try { ??????????????? //若是0表示的頂層的 ??????????????? if ("0".equals(pid)) { ?????????????????? //如果是頂層的，直接獲得第一級的欄目列表 ?????????????????? channles = getChannelManager().getAllChannelsByWebsitId(id, userId, false); ?????????????????? //channles = getChannelManager().getTopChannelsByWebsiteId(userId, id, true); ??????????????? } else { ?????????????????? channles = getChannelManager().getSubChannels(userId, id, true); ??????????????? } ??????????????? //channles = getChannelManager().getAllChannelsByWebsiteId(userId, id); ??????????????? //channles = getChannelManager().getChannel ??????????? } catch (WebContentManagementException e1) { ??????????????? e1.printStackTrace(); ??????????? } ??????????? if(!Validator.isEmpty(channles)){ ??????????????? for (Channel channel : channles) { ?????????????????? //取出刪除掉的欄目 ?????????????????? if ("4".equals(channel.getStatus())) {continue;} ??????????????? ?? //if(!"3".equals(channel.getStatus())){continue;}//只取已發布的 ?????????????????? Map<String, Object> map = new HashMap<String, Object>(); ?????????????????? map.put("id", channel.getChannelId()); ?????????????????? if (null == channel.getParentId() || channel.getParentId().equals("")) { ????????????????????? map.put("pid", channel.getWebsite().getWebsiteId()); ?????????????????? } else { ????????????????????? map.put("pid", channel.getParentId()); ?????????????????? } ? ?????????????????? map.put("name", channel.getChannelName()); ?????????????????? map.put("siteid", channel.getWebsiteId()); ?????????????????? map.put("isSite", 0); ?????????????????? map.put("chnlcode", channel.getCodeName()); ?????????????????? map.put("sitecode", channel.getWebsite().getCodeName()); ?????????????????? treeNodeList.add(map); ??????????????? } ??????????? } ??????????? ??????????? QueryCondition queryCondition = new QueryCondition(); ??????????? List<Website> websites; ??????????? try { ??????????????? websites = getWebsiteManager().findSubWebsitesByWebsiteId(userId, id, true, queryCondition); ??????????????? if (!Validator.isEmpty(websites)) { ?????????????????? for (Website website : websites) { ????????????????????? //只去掉已經刪除了的 ????????????????????? if ("4".equals(website.getStatus())) {continue;} ????????????????????? ????????????????????? //只取已發布的站點 ?????????????????? ?? //if(!"3".equals(website.getStatus())){continue;} ????????????????????? ????????????????????? Map<String, Object> map = new HashMap<String, Object>(); ????????????????????? if (website.getCodeName().equals("default")) { ???????????????????????? continue; ????????????????????? } ????????????????????? map.put("id", website.getWebsiteId()); ????????????????????? map.put("name", website.getName()); ????????????????????? map.put("isParent", true); ????????????????????? map.put("sitecode", website.getCodeName()); ????????????????????? map.put("isSite", 1); ????????????????????? map.put("nocheck", "true"); ????????????????????? treeNodeList.add(map); ?????????????????? } ??????????????? } ??????????? } catch (WebContentManagementException e) { ??????????????? e.printStackTrace(); ??????????? } ???????? } ???????? ???????? return JSONArray.fromObject(treeNodeList).toString(); ????? } catch (Exception e) { ???????? e.printStackTrace(); ????? } ????? return JSONArray.fromObject("").toString(); ?? } } |
總結
以上是生活随笔為你收集整理的zTree的调用设使用（跨两个系统，两类技术实现的项目案例SpringMVC+Spring+MyBatis和Struts2+Spring+ibatis框架组合）的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： JQuery UI - resizabl
- 下一篇： windows下安装nginx (转载自