最近正在使用zTree插件,专门用来实现树形菜单。
这里简述一下我操作的过程
下载zTree插件
http://www.treejs.cn/v3/demo.php#_306
这里我通过ajax发送请求获得表中的数据(这里的数据就是要进行树形菜单的)
前台
$.ajax({
type:"POST",
url:"sTree",
data:{t:Math.random()},
dataType:"json",
success:function(res){
//console.log(res);
var zNodes = res;
var setting = {
view: {
selectedMulti: false
},
edit: {
enable: true,
showRemoveBtn: false,
showRenameBtn: false
},
data: {
keep: {
parent:true,
leaf:true
},
simpleData: {
enable: true
}
},
callback: {
beforeDrag: beforeDrag,
beforeRemove: beforeRemove,
beforeRename: beforeRename,
onRemove: onRemove
}
};
$.fn.zTree.init($("#treeDemo"), setting, zNodes);
}
});
后台:(这里我最多只写了二级菜单。。。)
@RequestMapping(value = "/sTree",produces = "application/json; charset=utf-8")
@ResponseBody
public String systemStree(HttpServletRequest request, HttpServletResponse response){
List list = funService.selectAlls();
StringBuilder sb = new StringBuilder();
//排序 不在数据库中处理,格式如: 只处理二级的
/*{ id:1, pId:0, name:"父节点 1", open:true},
{ id:11, pId:1, name:"叶子节点 1-1"},
{ id:12, pId:1, name:"叶子节点 1-2"},
{ id:13, pId:1, name:"叶子节点 1-3"},
{ id:2, pId:0, name:"父节点 2", open:true},
{ id:21, pId:2, name:"叶子节点 2-1"},
{ id:22, pId:2, name:"叶子节点 2-2"},
{ id:23, pId:2, name:"叶子节点 2-3"},
{ id:3, pId:0, name:"父节点 3", open:true},
{ id:31, pId:3, name:"叶子节点 3-1"},
{ id:32, pId:3, name:"叶子节点 3-2"},
{ id:33, pId:3, name:"叶子节点 3-3"}*/
for (Fun fun : list) {
if(fun.getFunfathernode().equals("0")){
if(sb.toString().equals("")){
sb.append("{ \"id\":\""+fun.getFunid()+"\", \"pId\":\""+fun.getFunfathernode()+"\", \"name\":\""+fun.getFunname()+"\"}");
}
else{
sb.append(",{ \"id\":\""+fun.getFunid()+"\", \"pId\":\""+fun.getFunfathernode()+"\", \"name\":\""+fun.getFunname()+"\"}");
}
for (Fun funson : list) {
if(funson.getFunfathernode().equals(fun.getFunid())){
sb.append(",{ \"id\":\""+funson.getFunid()+"\", \"pId\":\""+funson.getFunfathernode()+"\", \"name\":\""+funson.getFunname()+"\"}");
}
}
}
}
return "["+sb.toString()+"]";
}