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框架组合）相关推荐

  1. Ajax跨域问题的两种解决方法

    Ajax跨域问题的两种解决方法 参考文章: (1)Ajax跨域问题的两种解决方法 (2)https://www.cnblogs.com/pandang/p/5341250.html 备忘一下.

  2. PhpCms V9调用指定栏目子栏目文章的两种方法

    PhpCms V9调用指定栏目子栏目文章的两种方法 第一种.直接写子栏目id ,用cat in {pc:get sql="SELECT * from v9_news where status ...

  3. 跨域 cors 请求两次_请求两次的故事-CORS

    跨域 cors 请求两次 The story of requesting twice, allow me to explain how it all began. 请求两次的故事,让我解释一下这是如何 ...

  4. Nginx解决前端调用后端接口跨域问题

    Nginx解决前端调用后端接口跨域问题 参考文章: (1)Nginx解决前端调用后端接口跨域问题 (2)https://www.cnblogs.com/wangymd/p/11200746.html ...

  5. 解决vue axios跨域请求发送两次问题

    解决vue axios跨域请求发送两次问题 参考文章: (1)解决vue axios跨域请求发送两次问题 (2)https://www.cnblogs.com/wordblog/p/12171875. ...

  6. vue 使用axios 出现跨域请求的两种解决方法

    vue 使用axios 出现跨域请求的两种解决方法 参考文章: (1)vue 使用axios 出现跨域请求的两种解决方法 (2)https://www.cnblogs.com/wangshengli5 ...

  7. 前端调用第三方接口跨域问题（淘宝）

    前端调用第三方接口跨域问题 百度了好久,大部分的文章都前篇一律的说jsonp跨域,要不就是说配置CROS.看到那种文章出处应该都是一家,心好累.首先来说淘宝目前的接口是不支持jsonp请求的,配置CR ...

  8. Java调用打印机打印PDF文档的两种方法

    最近,由于项目需求,需要增加系统调用打印机打印PDF文档功能.以前在Asp.Net项目中做过套打,但是现在的需求直接文档打印,下面是实现代码调用打印机的两种方法. 1.Java Print Servi ...

  9. 快速排斥实验amp;跨立实验 判断两直线是否相交

    两条线段有且仅有一个公共点,且这个点不是任何一条线段的端点时,称这两条线段是严格相交的. 也就是说线段不严格相交时可以将端点作为交点,但本文不讨论不严格相交,只讨论严格相交的情况(即使它们在算法实现上 ...

最新文章

  1. T-SQL 聚合函数Count与NULL
  2. value toDF is not a member of org.apache.spark.rdd.RDD[People]
  3. 第三十一期:大数据分析师学习入门，10个数据可视化技巧
  4. （10）MySQL触发器（同时操作两张表）
  5. python os write_Python os.write() 方法
  6. 面向计算机体系结构,面向计算机体系结构的程序优化.ppt
  7. mysql建表语句转oracle_MYSQL事务他快你慢，都是你自己惹的祸
  8. 在WPS绿色版中增加自定义皮肤
  9. 运维工作5年简历写成这样，谁敢要你
  10. C盘清理方法——基于spacesniffer软件和PatchCleaner软件
  11. C基础 工程中常用的排序
  12. 日历控件(bootstrap-datetimepicker.js)
  13. python中取余%
  14. Python的基本语法(十一)（持续更新）
  15. 10x 程序员工作法 - 总复习 | 重新来“看书”
  16. @staticmethod的粗浅认识
  17. Android判断GPS是否开启和让用户打开GPS
  18. 大白话理解：BRDF，皮肤渲染
  19. 计算机组成原理——TEC-2运算器实验
  20. 学人工智能去哪里培训？人工智能学校

热门文章

  1. 1.Redis安装以及常用命令
  2. leetcode最长无重复子串384题
  3. mvc:default-servlet-handler标签的作用
  4. Spring IoC(一)IoC容器的设计与实现：BeanFactory与ApplicationContext
  5. Java 设计模式之迭代器模式
  6. wxWidgets：支持插件的程序
  7. boost::sort模块float_sort 右移函子排序示例
  8. boost::equal相关的测试程序
  9. boost::iota相关的测试程序
  10. boost::phoenix::function相关的测试程序