当然前提是我们已经当如了相应的jar包,
首先我们得封装一个域模型(来存放对应json数据)如下:
package com.zsq.Sshcz.model;
import java.io.Serializable;
import javax.persistence.Entity;
import javax.persistence.GeneratedValue;
import javax.persistence.Id;
@Entity
public class Menuitem implements Serializable{
@Id
@GeneratedValue
private Long mid;
private Long pid;//父节点ID
private String name;//树上的节点的名称
private Boolean isParent;//是否为文件夹节点
private String icon;//图标图片的路径
public Long getMid() {
return mid;
}
public void setMid(Long mid) {
this.mid = mid;
}
public Long getPid() {
return pid;
}
public void setPid(Long pid) {
this.pid = pid;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public Boolean getIsParent() {
return isParent;
}
public void setIsParent(Boolean isParent) {
this.isParent = isParent;
}
public String getIcon() {
return icon;
}
public void setIcon(String icon) {
this.icon = icon;
}
}
由于ztree的构造是通过setting和zNode来实现的, 其中Setting要手动的设置,而这里的zNode就是具体的显示的 信息(json格式)
得到实体类后,我们键入dao层和service层代码(这里略);
下面是Action类:
package com.zsq.Sshcz.action;
import java.util.Collection;
import java.util.Iterator;
import javax.annotation.Resource;
import org.springframework.context.annotation.Scope;
import org.springframework.stereotype.Component;
import com.opensymphony.xwork2.ActionSupport;
import com.zsq.Sshcz.Service.MenuitemService;
import com.zsq.Sshcz.model.Menuitem;
@Component("menuAction")
@Scope("prototype")
public class MenuAction extends ActionSupport{
private MenuitemService menuitemService;
private Collection<Menuitem> menuitemList;
public Collection<Menuitem> getMenuitemList() {
return menuitemList;
}
@Resource(name="menuitemService")
public void setMenuitemService(MenuitemService menuitemService) {
this.menuitemService = menuitemService;
}
public String execute(){
menuitemList=this.menuitemService.getAllmenu();
for(Menuitem s: menuitemList){
System.out.println(s.getIcon()+"/"+s.getName()+"/"+s.getIsParent()+"/"+s.getMid()+"/"+s.getName()+"/"+s.getPid());
}
return SUCCESS;
}
}
下面是struts.xml中的配置:
<package name="menuitem" namespace="/" extends="json-default">
<action name="MenuAction" class="menuAction">
<result type="json"></result>
</action>
</package>
在Action类中menuService就是service层的代码:而menuitemList是要返回的json数据(当然经过了Struts.xml中相应的json配置的处理,最终得到json数据,返回到前台)
前台的html代码:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>tree.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
</head>
<script src="js/jquery-1.4.2.js"></script>
<script src="js/jquery-ztree-2.5.js"></script>
<link rel="stylesheet" href="zTreeStyle/zTreeStyle.css" type="text/css">
<script src="js/json.js"></script>
<body>
<div>
<ul id="tree" class="tree" style="width:260px; overflow:auto;"></ul>
</div>
</body>
</html>
这里要导入Jquery和相应的ztree和相应的css样式。其中json.js是自己写的与后台的Action进行交互
json.js的代码为:
var tree = {
setting:{
isSimpleData: true,
treeNodeKey: "mid",
treeNodeParentKey: "pid",
showLine: true,
root:{
isRoot:true,
nodes:[]
},
checkable:true
},
loadTree:function(){
$.post("MenuAction",null,function(data){
$("#tree").zTree(tree.setting,data.menuitemList);
});
}
};
$().ready(function(){
tree.loadTree();
});
其中
$.post("MenuAction",null,function(data){
$("#tree").zTree(tree.setting,data.menuitemList);
});
是通过Ajax以后台进行交互得到数据 ,其中data是回调函数从后台得到的,通过struts.xml中相应的json配置,返回的json数据。
这里就可以直接进行显示了,前提是 数据库里必须有 数据。。。(由于IDE没有打开),就不贴图了。
写给有需要的人。。。。