zTree 简介
zTree 是一个依靠 jQuery 实现的多功能 “树插件”。优异的性能、灵活的配置、多种功能的组合是 zTree 最大优点。
一个简单的ztree
java中使用zTree
将需要使用的 zTree v3.x 相关的 js、css文件分别放置到相应目录，并且保证相对路径正确.
先将Demo演示的框架源代码在自己的项目中演示出来
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>My JSP 'index.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
<link rel="stylesheet" href="<%=path %>/ztree/css/zTreeStyle/zTreeStyle.css" type="text/css">
<script type="text/javascript" src="<%=path %>/js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="<%=path %>/ztree/js/jquery.ztree.core.js"></script>
<SCRIPT type="text/javascript">
<!--
var setting = {
data: {
simpleData: {
enable: true
}
}
};
var zNodes =[
{ id:1, pId:0, name:"父节点F1 - 展开",},
{ id:11, pId:1, name:"父节点11 - 折叠"},
{ id:111, pId:11, name:"叶子节点111"},
{ id:112, pId:11, name:"叶子节点112"},
{ id:113, pId:11, name:"叶子节点113"},
{ id:114, pId:11, name:"叶子节点114"},
{ id:12, pId:1, name:"父节点12 - 折叠"},
{ id:121, pId:12, name:"叶子节点121"},
{ id:122, pId:12, name:"叶子节点122"},
{ id:123, pId:12, name:"叶子节点123"},
{ id:124, pId:12, name:"叶子节点124"},
{ id:13, pId:1, name:"父节点13 - 没有子节点", isParent:true},
{ id:2, pId:0, name:"父节点2 - 折叠"},
{ id:21, pId:2, name:"父节点21 - 展开", open:true},
{ id:211, pId:21, name:"叶子节点211"},
{ id:212, pId:21, name:"叶子节点212"},
{ id:213, pId:21, name:"叶子节点213"},
{ id:214, pId:21, name:"叶子节点214"},
{ id:22, pId:2, name:"父节点22 - 折叠"},
{ id:221, pId:22, name:"叶子节点221"},
{ id:222, pId:22, name:"叶子节点222"},
{ id:223, pId:22, name:"叶子节点223"},
{ id:224, pId:22, name:"叶子节点224"},
{ id:23, pId:2, name:"父节点23 - 折叠"},
{ id:231, pId:23, name:"叶子节点231"},
{ id:232, pId:23, name:"叶子节点232"},
{ id:233, pId:23, name:"叶子节点233"},
{ id:234, pId:23, name:"叶子节点234"},
{ id:3, pId:0, name:"父节点3 - 没有子节点", isParent:true}
];
$(function(){
$.fn.zTree.init($("#treeDemo"), setting, zNodes);
});
//-->
</SCRIPT>
</head>
<body>
<div id="treeDemo" class="ztree"></div>
</body>
</html>
3.将ztree代码加入自己的项目中，进行测试
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=0">
<title>二级分类维护</title>
<link href="<%=path %>/AmazeUI-2.4.2/assets/css/admin.css" rel="stylesheet" type="text/css">
<link href="<%=path %>/AmazeUI-2.4.2/assets/css/amazeui.css" rel="stylesheet" type="text/css">
<link href="<%=path %>/css/personal.css" rel="stylesheet" type="text/css">
<link href="<%=path %>/css/wallet.css" rel="stylesheet" type="text/css">
<link href="<%=path %>/css/infstyle.css" rel="stylesheet" type="text/css">
<link href="<%=path %>/css/wallet01.css" rel="stylesheet" type="text/css">
<script src="<%=path %>/AmazeUI-2.4.2/assets/js/jquery.min.js" type="text/javascript"></script>
<script src="<%=path %>/AmazeUI-2.4.2/assets/js/amazeui.js" type="text/javascript"></script>
<link rel="stylesheet" href="<%=path %>/ztree/css/zTreeStyle/zTreeStyle.css" type="text/css">
<script type="text/javascript" src="<%=path %>/js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="<%=path %>/ztree/js/jquery.ztree.core.js"></script>
<SCRIPT type="text/javascript">
<!--
var setting = {
data: {
simpleData: {
enable: true
}
}
};
var zNodes =[
{ id:1, pId:0, name:"父节点F1 - 展开",url:"<%=path%>/index.jsp", target:"twgdh"},
{ id:11, pId:1, name:"父节点11 - 折叠"},
{ id:111, pId:11, name:"叶子节点111"},
{ id:112, pId:11, name:"叶子节点112"},
{ id:113, pId:11, name:"叶子节点113"},
{ id:114, pId:11, name:"叶子节点114"},
{ id:12, pId:1, name:"父节点12 - 折叠"},
{ id:121, pId:12, name:"叶子节点121"},
{ id:122, pId:12, name:"叶子节点122"},
{ id:123, pId:12, name:"叶子节点123"},
{ id:124, pId:12, name:"叶子节点124"},
{ id:13, pId:1, name:"父节点13 - 没有子节点", isParent:true},
{ id:2, pId:0, name:"父节点2 - 折叠",url:"<%=path%>/login.jsp", target:"twgdh"},
{ id:21, pId:2, name:"父节点21 - 展开", open:true},
{ id:211, pId:21, name:"叶子节点211"},
{ id:212, pId:21, name:"叶子节点212",url:"<%=path%>/comReg.jsp", target:"twgdh"},
{ id:213, pId:21, name:"叶子节点213"},
{ id:214, pId:21, name:"叶子节点214"},
{ id:22, pId:2, name:"父节点22 - 折叠"},
{ id:221, pId:22, name:"叶子节点221"},
{ id:222, pId:22, name:"叶子节点222"},
{ id:223, pId:22, name:"叶子节点223"},
{ id:224, pId:22, name:"叶子节点224"},
{ id:23, pId:2, name:"父节点23 - 折叠"},
{ id:231, pId:23, name:"叶子节点231"},
{ id:232, pId:23, name:"叶子节点232"},
{ id:233, pId:23, name:"叶子节点233"},
{ id:234, pId:23, name:"叶子节点234"},
{ id:3, pId:0, name:"父节点3 - 没有子节点", isParent:true}
];
$(function(){
$.fn.zTree.init($("#treeDemo"), setting, zNodes);
});
//-->
</SCRIPT>
</head>
<body>
<!--头 -->
<header>
<article>
<div class="mt-logo">
<!--顶部导航条 -->
<div class="am-container header">
<ul class="message-l">
<div class="topMessage">
<div class="menu-hd">
<a href="#" target="_top" class="h">亲5，请登录</a>
<a href="#" target="_top">免费注册</a>
</div>
</div>
</ul>
<ul class="message-r">
<div class="topMessage home">
<div class="menu-hd"><a href="#" target="_top" class="h">商城首页</a></div>
</div>
<div class="topMessage my-shangcheng">
<div class="menu-hd MyShangcheng"><a href="#" target="_top"><i class="am-icon-user am-icon-fw"></i>个人中心</a></div>
</div>
<div class="topMessage mini-cart">
<div class="menu-hd"><a id="mc-menu-hd" href="#" target="_top"><i class="am-icon-shopping-cart am-icon-fw"></i><span>购物车</span><strong id="J_MiniCartNum" class="h">0</strong></a></div>
</div>
<div class="topMessage favorite">
<div class="menu-hd"><a href="#" target="_top"><i class="am-icon-heart am-icon-fw"></i><span>收藏夹</span></a></div>
</ul>
</div>
<!--悬浮搜索框-->
<div class="nav white">
<div class="logoBig">
<li><img src="/t03.9.1/images/logobig.png" /></li>
</div>
<div class="search-bar pr">
<a name="index_none_header_sysc" href="#"></a>
<form>
<input id="searchInput" name="index_none_header_sysc" type="text" placeholder="搜索" autocomplete="off">
<input id="ai-topsearch" class="submit am-btn" value="搜索" index="1" type="submit">
</form>
</div>
</div>
<div class="clear"></div>
</div>
</div>
</article>
</header>
<div class="nav-table">
<div class="long-title"><span class="all-goods">全部分类</span></div>
<div class="nav-cont">
<ul>
<li class="index"><a href="#">首页</a></li>
<li class="qc"><a href="#">闪购</a></li>
<li class="qc"><a href="#">限时抢</a></li>
<li class="qc"><a href="#">团购</a></li>
<li class="qc last"><a href="#">大包装</a></li>
</ul>
<div class="nav-extra">
<i class="am-icon-user-secret am-icon-md nav-user"></i><b></b>我的福利
<i class="am-icon-angle-right" style="padding-left: 10px;"></i>
</div>
</div>
</div>
<b class="line"></b>
<div class="center">
<div class="col-main">
<div class="main-wrap">
<div class="walletList">
<!-- <div class="walletTitle">
<li class="time">创建时间</th>
<li class="name">详情</th>
<li class="amount">金额</th>
<li class="balance">余额</th>
</div> -->
<div id="treeDemo" class="ztree ztreeLeft"></div>
<iframe class="ztreeRight" src="<%=path %>/ztreeRight.jsp" name="twgdh"></iframe>
</div>
</div>
<!--底部-->
<div class="footer">
<div class="footer-hd">
<p>
<a href="#">恒望科技</a>
<b>|</b>
<a href="#">商城首页</a>
<b>|</b>
<a href="#">支付宝</a>
<b>|</b>
<a href="#">物流</a>
</p>
</div>
<div class="footer-bd">
<p>
<a href="#">关于恒望</a>
<a href="#">合作伙伴</a>
<a href="#">联系我们</a>
<a href="#">网站地图</a>
</p>
</div>
</div>
</div>
<jsp:include page="/mainLeft.jsp"/>
</div>
</body>
</html>
4.在项目中使用Controll控制Service查询数据拼接ztree要使用的字符串
package com.senchen.shop.svs.back.impl;
import java.util.List;
import javax.annotation.Resource;
import org.apache.log4j.Logger;
import org.springframework.stereotype.Service;
import com.senchen.shop.entity.Kind;
import com.senchen.shop.manager.kind.kindManager;
import com.senchen.shop.manager.kindsec.KindSecondManager;
import com.senchen.shop.svs.back.KindService;
@Service
public class KindServiceImpl implements KindService {
Logger log=Logger.getLogger(getClass()); //以当前类路径创建日志对
@Resource
kindManager kmng;
@Resource
KindSecondManager secMng;
/**
* 查询所有的分类，返回 需要的字符串格式
* @return String
* [
{ id:1, pId:0, name:"父节点F1 - 展开",url:"<%=path%>/index.jsp", target:"twgdh"},
{ id:11, pId:1, name:"父节点11 - 折叠"},
{ id:111, pId:11, name:"叶子节点111"},
{ id:112, pId:11, name:"叶子节点112"},
{ id:113, pId:11, name:"叶子节点113"},
{ id:114, pId:11, name:"叶子节点114"},
]
* @throws RuntimeException
*/
@Override
public String getAllTreeStr() throws RuntimeException {
log.debug("日志1..查询 ");
List<Kind> klist = kmng.findAll();
StringBuffer bf=new StringBuffer();
bf.append("[");
for (Kind k : klist) {
bf.append("{");
bf.append(" id:"+k.getKid()+",");
bf.append(" pId:"+k.getUpid()+",");
bf.append(" name:'"+k.getKindName()+"',");
bf.append(" url:'list.do?id="+k.getKid()+"',");
bf.append(" target:'twgdh'");
bf.append("},");
}
bf.append("]");
log.debug("日志2..封装成字符串 " + bf.toString());
return bf.toString();
}//getAllTreeStr()
}
5.在自己的ztree项目页面中使用字符串替换Demo中的字符串
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=0">
<title>二级分类维护</title>
<link href="<%=path %>/AmazeUI-2.4.2/assets/css/admin.css" rel="stylesheet" type="text/css">
<link href="<%=path %>/AmazeUI-2.4.2/assets/css/amazeui.css" rel="stylesheet" type="text/css">
<link href="<%=path %>/css/personal.css" rel="stylesheet" type="text/css">
<link href="<%=path %>/css/wallet.css" rel="stylesheet" type="text/css">
<link href="<%=path %>/css/infstyle.css" rel="stylesheet" type="text/css">
<link href="<%=path %>/css/wallet01.css" rel="stylesheet" type="text/css">
<script src="<%=path %>/AmazeUI-2.4.2/assets/js/jquery.min.js" type="text/javascript"></script>
<script src="<%=path %>/AmazeUI-2.4.2/assets/js/amazeui.js" type="text/javascript"></script>
<link rel="stylesheet" href="<%=path %>/ztree/css/zTreeStyle/zTreeStyle.css" type="text/css">
<script type="text/javascript" src="<%=path %>/js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="<%=path %>/ztree/js/jquery.ztree.core.js"></script>
<SCRIPT type="text/javascript">
<!--
var setting = {
data: {
simpleData: {
enable: true
}
}
};
var zNodes =${zdata};
$(function(){
$.fn.zTree.init($("#treeDemo"), setting, zNodes);
});
//-->
</SCRIPT>
</head>
<body>
<!--头 -->
<header>
<article>
<div class="mt-logo">
<!--顶部导航条 -->
<div class="am-container header">
<ul class="message-l">
<div class="topMessage">
<div class="menu-hd">
<a href="#" target="_top" class="h">亲5，请登录</a>
<a href="#" target="_top">免费注册</a>
</div>
</div>
</ul>
<ul class="message-r">
<div class="topMessage home">
<div class="menu-hd"><a href="#" target="_top" class="h">商城首页</a></div>
</div>
<div class="topMessage my-shangcheng">
<div class="menu-hd MyShangcheng"><a href="#" target="_top"><i class="am-icon-user am-icon-fw"></i>个人中心</a></div>
</div>
<div class="topMessage mini-cart">
<div class="menu-hd"><a id="mc-menu-hd" href="#" target="_top"><i class="am-icon-shopping-cart am-icon-fw"></i><span>购物车</span><strong id="J_MiniCartNum" class="h">0</strong></a></div>
</div>
<div class="topMessage favorite">
<div class="menu-hd"><a href="#" target="_top"><i class="am-icon-heart am-icon-fw"></i><span>收藏夹</span></a></div>
</ul>
</div>
<!--悬浮搜索框-->
<div class="nav white">
<div class="logoBig">
<li><img src="/t04.1/images/logobig.png" /></li>
</div>
<div class="search-bar pr">
<a name="index_none_header_sysc" href="#"></a>
<form>
<input id="searchInput" name="index_none_header_sysc" type="text" placeholder="搜索" autocomplete="off">
<input id="ai-topsearch" class="submit am-btn" value="搜索" index="1" type="submit">
</form>
</div>
</div>
<div class="clear"></div>
</div>
</div>
</article>
</header>
<div class="nav-table">
<div class="long-title"><span class="all-goods">全部分类</span></div>
<div class="nav-cont">
<ul>
<li class="index"><a href="#">首页</a></li>
<li class="qc"><a href="#">闪购</a></li>
<li class="qc"><a href="#">限时抢</a></li>
<li class="qc"><a href="#">团购</a></li>
<li class="qc last"><a href="#">大包装</a></li>
</ul>
<div class="nav-extra">
<i class="am-icon-user-secret am-icon-md nav-user"></i><b></b>我的福利
<i class="am-icon-angle-right" style="padding-left: 10px;"></i>
</div>
</div>
</div>
<b class="line"></b>
<div class="center">
<div class="col-main">
<div class="main-wrap">
<div class="walletList">
<!-- <div class="walletTitle">
<li class="time">创建时间</th>
<li class="name">详情</th>
<li class="amount">金额</th>
<li class="balance">余额</th>
</div> -->
<div id="treeDemo" class="ztree ztreeLeft"></div>
<iframe class="ztreeRight" src="<%=path %>/ctrl/pingtai/kindTree/list.do" name="twgdh"></iframe>
</div>
</div>
<!--底部-->
<div class="footer">
<div class="footer-hd">
<p>
<a href="#">恒望科技</a>
<b>|</b>
<a href="#">商城首页</a>
<b>|</b>
<a href="#">支付宝</a>
<b>|</b>
<a href="#">物流</a>
</p>
</div>
<div class="footer-bd">
<p>
<a href="#">关于恒望</a>
<a href="#">合作伙伴</a>
<a href="#">联系我们</a>
<a href="#">网站地图</a>
</p>
</div>
</div>
</div>
<jsp:include page="/mainLeft.jsp"/>
</div>
</body>
</html>
Log4j日志管理工具
Log4j是Apache的一个开源项目，通过使用Log4j，我们可以控制日志信息输送的目的地是控制台、文件、GUI组件，甚至是套接口服务器、NT的事件记录器、UNIX Syslog守护进程等；我们也可以控制每一条日志的输出格式；通过定义每一条日志信息的级别，我们能够更加细致地控制日志的生成过程。最令人感兴趣的就是，这些可以通过一个配置文件来灵活地进行配置，而不需要修改应用的代码。
Log4j的配置
一.配置文件
Log4j默认的配置文件是log4j.properties，将该文件置于classpath下，容器启动时会初始化Log4j。Log4j把日志级别由低到高依次分为ALL、TRACE、DEBUG、INFO、WARN、ERROR、FITAL和OFF等。其中，级别高的会屏蔽低的信息。如果设置为WARN，则INFO、DEBUG都不会输出。
二.5个重要的概念
Log4j配置中有5个重要的概念：
日志记录器（Logger）Logger负责记录日志；
根记录器（rootLogger）rootLogger是所有记录器的父亲，任何记录器都可继承rooLogger的配置；
类别（category）category可以设置类别下所有的Logger，类似于java中的包，效果与Logger名字等价；
输出地（Appender）Appender负责输出到什么地方；
日志格式化器（Layout）Layout负责以什么格式输出、输出哪些附加信息（比如：时间、类名、方法名、所在行数等）。
在log4j.properties配置中，log4j.logger后面配置的是Logger，log4j.appender后面配置的是Appender，rootLogger直接用log4j.rootLogger配置。
三、1个log4j.properties配置实例
### Console ###
log4j.appender.AA=org.apache.log4j.ConsoleAppender
log4j.appender.AA.Target=System.out
log4j.appender.AA.layout=org.apache.log4j.PatternLayout
log4j.appender.AA.layout.ConversionPattern=%p [%C{1}:%L] %m%n
### File ###
log4j.appender.D=org.apache.log4j.FileAppender
log4j.appender.D.File=D://logs/log.log
log4j.appender.D.Append=true
log4j.appender.D.Threshold=DEBUG
log4j.appender.D.layout=org.apache.log4j.PatternLayout
log4j.appender.D.layout.ConversionPattern=%-d{yyyy-MM-dd HH:mm:ss} [ %t:%r ] - [ %p ] %m%n
### root level ###
log4j.rootLogger=debug,AA
### spring level ###
log4j.logger.org.springframework=WARN
### your package level ###
log4j.logger.com.senchen=WARN
### your sub package level ###
log4j.logger.com.senchen.shop=debug
四.Java中使用Log4j
public class KindTreeController {
Logger log=Logger.getLogger(getClass()); //以当前类路径创建日志对
public String list(Model md){
log.debug("日志1...查询所有的分类，组成zTree字符串");//使用日志对象
String s = ksvs.getAllTreeStr();
md.addAttribute("zdata", s);
log.debug("日志2...保存到request中，转发");
return "/kind/kind_tree";
}//tree
}
