1.建实体
[java] view plain copy print?
/**
* 菜单项
* @author xx
*
*/
public class Menuitem implements Serializable {
private Long mid;
private Long pid;//父节点ID
private String name;//树上的节点的名称
private Boolean isParent;//是否为文件夹节点
private String icon;//图标图片的路径
private Set<User> users;
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;
}
public Set<User> getUsers() {
return users;
}
public void setUsers(Set<User> users) {
this.users = users;
}
}
2.controller代码
[java] view plain copy print?
/**
* 查询树节点的controller
* @author xx
*
*/
@Controller("menuitemAction")
@Scope("prototype")
public class MenuitemAction extends BaseAction<Menuitem>{
@Resource(name="menuitemService")
private MenuitemService menuitemService;
/**
* 节点的list
*/
private Collection<Menuitem> menuitemList;
public Collection<Menuitem> getMenuitemList() {
return menuitemList;
}
/**
* 查询所有的节点
* @return
*/
@JSON(serialize=false)
public String getAllMenuitem(){
this.menuitemList = this.menuitemService.getAllMenuitems();
return SUCCESS;
}
}
返回json格式的数据
3.html页面
[html] view plain copy print?
<script src="js/jquery-1.4.2.js"></script>
<script src="js/jquery-ztree-2.5.js"></script>
<link rel="stylesheet" type="text/css" href="zTreeStyle/zTreeStyle.css">
<script src="js/tree.js"></script>
<body>
This is my HTML page. <br>
<div>
<ul id="tree" class="tree" style="width:230px; overflow:auto;"></ul>
</div>
</body>
4.js
[javascript] view plain copy print?
var tree = {
setting:{
isSimpleData: true,
treeNodeKey: "mid",
treeNodeParentKey: "pid",
showLine: true,
root:{
isRoot:true,
nodes:[]
}
},
/**
* 1、回调函数是由服务器端触发的,什么时候执行由服务器决定
* 2、回调函数是由jQuery内核调用的
* 3、客户端存在两个线程
* 4、如果在js代码中,有一些代码要用到回调函数中的数据,那么这些代码必须放在回调函数中
*/
loadTree:function(){
$.post("menuitemAction_getAllMenuitem.action",null,function(data){
$("#tree").zTree(tree.setting,data.menuitemList);
});
}
};
$().ready(function(){
tree.loadTree();
});
[java] view plain copy print?
/**
* 菜单项
* @author xx
*
*/
public class Menuitem implements Serializable {
private Long mid;
private Long pid;//父节点ID
private String name;//树上的节点的名称
private Boolean isParent;//是否为文件夹节点
private String icon;//图标图片的路径
private Set<User> users;
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;
}
public Set<User> getUsers() {
return users;
}
public void setUsers(Set<User> users) {
this.users = users;
}
}
2.controller代码
[java] view plain copy print?
/**
* 查询树节点的controller
* @author xx
*
*/
@Controller("menuitemAction")
@Scope("prototype")
public class MenuitemAction extends BaseAction<Menuitem>{
@Resource(name="menuitemService")
private MenuitemService menuitemService;
/**
* 节点的list
*/
private Collection<Menuitem> menuitemList;
public Collection<Menuitem> getMenuitemList() {
return menuitemList;
}
/**
* 查询所有的节点
* @return
*/
@JSON(serialize=false)
public String getAllMenuitem(){
this.menuitemList = this.menuitemService.getAllMenuitems();
return SUCCESS;
}
}
返回json格式的数据
3.html页面
[html] view plain copy print?
<script src="js/jquery-1.4.2.js"></script>
<script src="js/jquery-ztree-2.5.js"></script>
<link rel="stylesheet" type="text/css" href="zTreeStyle/zTreeStyle.css">
<script src="js/tree.js"></script>
<body>
This is my HTML page. <br>
<div>
<ul id="tree" class="tree" style="width:230px; overflow:auto;"></ul>
</div>
</body>
4.js
[javascript] view plain copy print?
var tree = {
setting:{
isSimpleData: true,
treeNodeKey: "mid",
treeNodeParentKey: "pid",
showLine: true,
root:{
isRoot:true,
nodes:[]
}
},
/**
* 1、回调函数是由服务器端触发的,什么时候执行由服务器决定
* 2、回调函数是由jQuery内核调用的
* 3、客户端存在两个线程
* 4、如果在js代码中,有一些代码要用到回调函数中的数据,那么这些代码必须放在回调函数中
*/
loadTree:function(){
$.post("menuitemAction_getAllMenuitem.action",null,function(data){
$("#tree").zTree(tree.setting,data.menuitemList);
});
}
};
$().ready(function(){
tree.loadTree();
});