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>

</head>

<body>

<%--<div style="background:url('${imagesPath}/tree-icon/web.jpg') 0 0 no-repeat; width:100px; height:100px;"></div>--%>

</div>

</body>

</html>

3、树的tree.js。调用如下：

$(function(){

* name :Zuoquan Tu

* mail :tuzq@XXXXXXX.cn

* date :2015/11/25

* version :1.0

* description:

(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、、要调用的第三方系统的接口写法（注意下面的实现方式是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框架组合）的更多相关文章

AJAX跨域问题解决方法（3）——被调用方解决跨域
被调用方解决跨域是指在HTTP响应头中增加指定的字段,允许调用方调用可以在两种地方增加1.apache/nginx(HTTP服务器)2.tomcat(应用服务器) 浏览器如何判断跨域?仔细观察可以发 ...
AJAX跨域问题解决方法（4）——调用方解决跨域
调用方解决跨域的方法只有一种,那就是隐藏跨域. 何为隐藏跨域? 隐藏跨域的核心思路是通过反向代理隐藏跨域以欺骗浏览器什么是反向代理?反向代理是指通过中间服务器使得访问同一个域名的两个不同url最终会 ...
System.Web.Http.Cors配置跨域访问的两种方式
System.Web.Http.Cors配置跨域访问的两种方式使用System.Web.Http.Cors配置跨域访问,众多大神已经发布了很多文章,我就不在详细描述了,作为小白我只说一下自己的使用心 ...
ArcGIS API for Silverlight 调用WebService出现跨域访问报错的解决方法
原文:ArcGIS API for Silverlight 调用WebService出现跨域访问报错的解决方法群里好几个朋友都提到过这样的问题,说他们在Silverlight中调用了WebServi ...
转载]PhpCms V9调用指定栏目子栏目文章的两种方法
PhpCms V9调用指定栏目子栏目文章的两种方法第一种.直接写子栏目id ,用cat in {pc:get sql="SELECT * from v9_news where status ...
shell中调用R语言并传入参数的两种步骤
shell中调用R语言并传入参数的两种方法第一种: Rscript myscript.R R脚本的输出第二种: R CMD BATCH myscript.R # Check the output ...
struts2+spring的两种整合方式
也许有些人会因为学习了struts1,会以为struts2.struts1与spring的整合也是一样的,其实这两者相差甚远.下面就来讲解一下struts2与spring的整合两种方案.(部分转载,里 ...
[Mugeda HTML5技术教程之16]案例分析：制作跨屏互动游戏
本节我们将要做一个跨屏互动应用的案例分析,该应用时给一家商场做活动使用的,是一个跨屏爱消除游戏.PC端页面显示在连接在PC的大屏幕上,参与活动的玩家可以用自己的手机扫描PC端页面上的二维码,连接成功后 ...
通过微信Android和iOS版，看两大系统的差异
由于设计师或者产品经理使用的移动设备大部分是iPhone,所以在做设计时,容易忽略Android和iOS的差异,按照自己的使用习惯进行设计,导致大部分设计师或产品经理做出的设计都是基于iOS规范或习惯 ...

随机推荐

DB查询分析器7.01新增的周、月SQL执行计划功能
DB查询分析器7.01新增的周.月SQL执行计划功能马根峰 (广东联合电子服务股份有限公司, 广州 510300) 1 引言中国本土 ...
EBS开发性能优化之查找需要优化的程序
1.登陆数据库LINUX环境使用 top 命令查看进程状况 [oratest@ebsdb~]$top top - 15:58:59 up 8 days, 22:04, 1 user, load ...
带你深入理解STL之Set和Map
在上一篇博客带你深入理解STL之RBTree中,讲到了STL中关于红黑树的实现,理解起来比较复杂,正所谓前人种树,后人乘凉,RBTree把树都种好了,接下来就该set和map这类关联式容器来" ...
Android View框架总结（四）View布局流程之Measure
View树的measure流程 View的measures时序图 View布局流程之measure measure过程 View的measure过程 ViewGroup的measure过程 Frame ...
Android开发学习之路--RxAndroid之lambda
RxJava的简单使用基本上也了解了,其实还有一个比较好玩的就是java8才有的lambda了. lambda在android studio下的环境搭建下载java8 下面就来搭建下这个环境 ...
深入浅出Tabhost+简单入门Demo
小伙伴们在手机上逛淘宝的时候,会发现在淘宝的下面有个按钮,分别是首页.微淘.社区.购物车和我的淘宝,点击不同的按钮会跳转到不同的页面,目前小编所接手的这个项目,也需要用到类似这样的功能,小编就发挥网络 ...
Android 9Patch图片的使用-android学习之旅（十八）
9patch的使用方法 9patch图片常被用来做消息发送等的图片,只是缩放照片的部分区域,使得图片的整体形状不会受到影响,比较方便. 下面我们介绍一下: 在android的SDK安装目录下的tool ...
JQuery实战---窗口效果
在前面的相关博文中,小编对jquery的相关知识进行了简单的总结,关于jquery的很多小的知识点,都需要我们自己去动手和实践,一行行代码都需要我们自己亲自动手去敲,今天我们继续来学习jquery的相 ...
(NO.00004)iOS实现打砖块游戏(四):砖块类的实现
大熊猫猪·侯佩原创或翻译作品.欢迎转载,转载请注明出处. 如果觉得写的不好请告诉我,如果觉得不错请多多支持点赞.谢谢! hopy ;) 用Xcode打开之前SpriteBuilder创建的项目,我们现 ...
springMVC对异常处理的支持
无论做什么项目,进行异常处理都是非常有必要的,而且你不能把一些只有程序员才能看懂的错误代码抛给用户去看,所以这时候进行统一的异常处理,展现一个比较友好的错误页面就显得很有必要了.跟其他MVC框架一样, ...

zTree的调用设使用（跨两个系统，两类技术实现的项目案例SpringMVC+Spring+MyBatis和Struts2+Spring+ibatis框架组合）

zTree的调用设使用（跨两个系统，两类技术实现的项目案例SpringMVC+Spring+MyBatis和Struts2+Spring+ibatis框架组合）的更多相关文章

随机推荐

热门专题