ztree的使用,spring和springMVC整合
1.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 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>
效果如下
树结构放在左边，右边放列表页面需要用到iframe
<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>
样式如下
.walletList{width:100% ;}
.ztreeLeft{width:24%;background:skyblue; float: left}
.ztreeRight{width:75%; height:600px; float: left}
2.页面处理好后在之前的springMVC上整合spring
2.1 配置web.xml文件
加上如下代码
<!-- spring文档位置 -->
<context-param>
<param-name>contextConfigLocation</param-name>
<param-value>classpath:app*.xml</param-value>
</context-param>
<!-- 读spring文档位置 相对于 ioc = new ClassPathXMLApplicationContext( contextConfigLocation )
application.setAttribute( WebApplicationContext.ROOT_WEB_APPLICATION_CONTEXT_ATTRIBUTE, ioc);
-->
<listener>
<listener-class>org.springframework.web.context.ContextLoaderListener</listener-class>
</listener>
2.2 编写app.xml spring的配置文件
<aop:aspectj-autoproxy/>声明自动为spring容器中那些配置@aspectJ切面的bean创建代理
为了不影响springMVC的配置，这里spring的自动扫描注解需要排除Controller注解
<context:component-scan base-package="com.senchen"> <!-- 避免 spring-mvc 再次创建一个Controller 实例 -->
<context:exclude-filter type="annotation" expression="org.springframework.stereotype.Controller"/>
</context:component-scan>
整个配置文件如下
<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xmlns:context="http://www.springframework.org/schema/context"
xmlns:aop="http://www.springframework.org/schema/aop"
xsi:schemaLocation="http://www.springframework.org/schema/beans
http://www.springframework.org/schema/beans/spring-beans.xsd
http://www.springframework.org/schema/context
http://www.springframework.org/schema/context/spring-context.xsd
http://www.springframework.org/schema/aop
http://www.springframework.org/schema/aop/spring-aop.xsd">
<context:component-scan base-package="com.senchen"> <!-- 避免 spring-mvc 再次创建一个Controller 实例 -->
<context:exclude-filter type="annotation" expression="org.springframework.stereotype.Controller"/>
</context:component-scan> <!-- 只管理 @Component, @Service, @Repository -->
<aop:aspectj-autoproxy/>
</beans>
springMVC配合只扫描@Controller
<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xmlns:p="http://www.springframework.org/schema/p"
xmlns:context="http://www.springframework.org/schema/context"
xsi:schemaLocation="
http://www.springframework.org/schema/beans
http://www.springframework.org/schema/beans/spring-beans.xsd
http://www.springframework.org/schema/context
http://www.springframework.org/schema/context/spring-context.xsd">
<context:component-scan base-package="com.senchen"> <!-- 只管理 @Controller -->
<context:include-filter type="annotation" expression="org.springframework.stereotype.Controller"/>
</context:component-scan>
<!-- 试图解析器 springMVC管理的jsp文件位置应该在 /WEB-INF/meto/ -->
<bean id="jspViewResolver" class="org.springframework.web.servlet.view.InternalResourceViewResolver
<property name="prefix" value="/WEB-INF/meto/"/>
<property name="suffix" value=".jsp"/>
</bean>
</beans>
2.3 加上跳转按钮
<li> <a href="<%=path%>/ctrl/pingtai/kindTree/tree.do">分类维护tree版</a></li>
2.4 编写视图解析层
调用业务层的方法查询到所有的分类组成需要的字符串类型
并保存到request域中，转发到/kind/kind_tree
@Controller
public class KindTreeController {
@Resource
KindService ksvs;
@RequestMapping("/tree")
public String list(Model md){
System.out.println(this.getClass()+"日志1...查询所有的分类，组成zTree字符串");
String s = ksvs.getAllTreeStr();
md.addAttribute("zdata", s);
System.out.println(this.getClass()+"日志2...保存到request中，转发");
return "/kind/kind_tree";
}//list
}
业务层需要一个接口需要一个类来实现它,这里是实现类的代码
它需要调用持久层的方法在类上加注解@Service,引用的属性上加@Resource
@Service
public class KindServiceImpl implements KindService {
@Resource
kindManager kmng;
/**
* 查询所有的分类，返回 需要的字符串格式
* @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 {
System.out.println("\t"+this.getClass()+"日志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("},");
}
bf.append("]");
System.out.println("\t"+this.getClass()+"日志2..封装成字符串 " + bf.toString());
return bf.toString();
}//
}
持久层来查询所有的分类
注意加上@Repository注解
最后是页面的展示，这里注意样式路径的修改
取出在request域中存入的ztree型的字符串
<SCRIPT type="text/javascript">
<!--
var setting = {
data: {
simpleData: {
enable: true
}
}
};
var zNodes =${zdata};
$(function(){
$.fn.zTree.init($("#treeDemo"), setting, zNodes);
});
//-->
</SCRIPT>
3.接下来做点击左边的树结构右边显示对应的它的自分类的效果
3.1 视图解析层
<iframe class="ztreeRight" src="<%=path %>/ctrl/pingtai/kindTree/list.do" name="twgdh"></iframe>
列表页面的显示区域list.do的请求，那么在视图解析层加上这个方法
参数要有id的值没有默认为0，Model 把查到了数据存到request域中
如果id为0就调用业务层方法拿到所有的一级分类
id不为0调用业务层方法拿到这个id的子分类
转发到kind_list.jsp页面
@RequestMapping("/list")
public String list(@RequestParam(defaultValue="0") int id,Model md){
System.out.println(this.getClass()+"日志1...根据上级获取下级");
List<Kind> list = null;
if( id ==0){
list = ksvs.getFirstTypes();
}else{
list = ksvs.getSubTypes( id );
}
md.addAttribute("typeList", list);
return "/kind/kind_list";
}//tree
3.2 业务层的查询分类方法修改
在返回的字符串中加入url和target。url为list.do这里是相对路径并带上自己的id作为参数
target值为twgdh,让列表显示在名为twgdh的区域中
<iframe class="ztreeRight" src="<%=path %>/ctrl/pingtai/kindTree/list.do" name="twgdh"></iframe>
业务层改动的代码如下：
@Service
public class KindServiceImpl implements KindService {
@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 {
System.out.println("\t"+this.getClass()+"日志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("]");
System.out.println("\t"+this.getClass()+"日志2..封装成字符串 " + bf.toString());
return bf.toString();
}//getAllTreeStr()
}
3.3业务层加入两个方法
查询一级分类集合和查询下级分类集合调用持久层
public List<Kind> getFirstTypes()throws RuntimeException{
System.out.println("\t"+this.getClass()+"日志1..查询一级 ");
return kmng.findKindfirst();
}
/**
* 查询 下级 分类集合
* @param id
* @return
*/
public List<Kind> getSubTypes(int id)throws RuntimeException{
System.out.println("\t"+this.getClass()+"日志1..查询指定id的下级 ");
return secMng.findSecondByFirst( id );
}
3.4持久层连接数据库执行sql完成
3.5 列表页面来显示查到的数据
用EL表达式来循环遍历数据
<div class="walletCont">
<c:if test="${!empty(typeList) }">
<c:forEach items="${typeList }" var="t" varStatus="st">
<li class="cost">
<div class="time">
<p>${st.count}</p>
<p class="text-muted"> </p>
</div>
<div class="title name">
<p class="content">${t.kindName }</p>
</div>
<div class="amount">
<span class="amount-pay"><img src="<%=path + WebUtils.def_kindImgPath %>${t.kindImg}" /></span>
</div>
<div class="balance">
<span> </span> <em> <a
href="/t03.9.1/pingtai/adm/adm_view.jsp?id=">查看</a> |<a
href="/t03.9.1/pingtai/adm/adm_del_do.jsp?sid=">删除</a>| <a
href="/t03.9.1/svlt/pingtai/kindsec/befUpd?uid=3">修改</a> </em>
</div>
</li>
</c:forEach>
</c:if>
</div>
需要注意所有用到的持久层的实现类要加上@Repository注解
网友评论