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+"/";
%>
My JSP 'index.jsp' starting page
效果如下
树结构放在左边，右边放列表页面需要用到iframe
样式如下
.walletList{width:100% ;}
.ztreeLeft{width:24%;background:skyblue; float: left}
.ztreeRight{width:75%; height:600px; float: left}
2.页面处理好后在之前的springMVC上整合spring
2.1 配置web.xml文件
加上如下代码
contextConfigLocation
classpath:app*.xml
org.springframework.web.context.ContextLoaderListener
2.2 编写app.xml spring的配置文件
为了不影响springMVC的配置，这里spring的自动扫描注解需要排除Controller注解
整个配置文件如下
springMVC配合只扫描@Controller
2.3 加上跳转按钮
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 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型的字符串
3.接下来做点击左边的树结构右边显示对应的它的自分类的效果
3.1 视图解析层
列表页面的显示区域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 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的区域中
业务层改动的代码如下：
@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 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 getFirstTypes()throws RuntimeException{
System.out.println("\t"+this.getClass()+"日志1..查询一级 ");
return kmng.findKindfirst();
}
/**
* 查询 下级 分类集合
* @param id
* @return
*/
public List getSubTypes(int id)throws RuntimeException{
System.out.println("\t"+this.getClass()+"日志1..查询指定id的下级 ");
return secMng.findSecondByFirst( id );
}
3.4持久层连接数据库执行sql完成
3.5 列表页面来显示查到的数据
用EL表达式来循环遍历数据
需要注意所有用到的持久层的实现类要加上@Repository注解