[学习笔记]zTree是一个很好的js插件实现加载树形结构

本文介绍了一个基于Java的菜单树结构实现方案，包括实体类定义、控制器逻辑、前端展示及JavaScript交互。通过具体代码展示了如何搭建一个菜单树，并利用ZTree插件进行前端渲染。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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();
});