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();
}
}
