1、节点对象:构造权限树的节点对象,树插件使用的是dwz自带的插件,所以对应的有rel,
/**
*节点对象
*/
public class Node{
//节点id
private Integer id;
//父节点id
private Integer pId;
//节点名称
private String name;
//rel
private String rel;
//url
private String url;
getter...
setter...
}
2、后台
......
//登陆系统时获取当前用户权限列表
List<TreeNode> userOperateList = userService.getOperateList(user.getUserId());
//对象转化为json 需要jsckson-mapper-asl-1.6.6,jar
ObjectMapper objectMapper = new ObjectMapper();
String json = objectMapper.writeValueAsString(endOperateList);
System.out.println(json);//
model.addAttribute("json", json);
//json形如:
[{"id":1,"pId":0,"name":"aaa","rel":"a","url":""},
{"id":2,"pId":1,"name":"bbb","rel":"b","url":""},
{"id":3,"pId":2,"name":"ccc","rel":"c","url":""},
{"id":4,"pId":3,"name":"ddd","rel":"d","url":""},
{"id":5,"pId":2,"name":"eee","rel":"e","url":""},
{"id":6,"pId":5,"name":"fff","rel":"f","url":""}]
//注意:根节点的pId需要为0,生成树时需要查找0来判断跟节点,
//其实每个pId为0的节点对应pannel的一个滑动块,
//若有多个pId为0的节点,会生成多个滑动块,如下图
3、页面 index.jsp
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<%@ page contentType="text/html;charset=UTF-8" pageEncoding="UTF-8"%>
<%
//获取项目名称
String pathStr = request.getContextPath();
pageContext.setAttribute("pathStr",pathStr);
%>
......
<script type="text/javascript">
$(function(){
DWZ.init("<c:url value='/styles/dwz/dwz.frag.xml'/>", {
//loginTitle:"Login", // 弹出登录对话框
loginUrl:"<c:url value='/login' />", // 跳到登录页面
pageInfo:{pageNum:"pageNum", numPerPage:"pageSize", orderField:"orderField", orderDirection:"orderDirection"},
debug:false, // 调试模式 【true|false】
callback:function(){
initEnv();
$("#themeList").theme({themeBase:"<c:url value='/styles/dwz/themes'/>"});
}
});
//后台传来的json对象
var data = ${json};
//动态生成tree,此处的0为根节点的pId
$("#jTree").html(getJTree(data,0));
});
//构造accordion Content
function getContente(data,pId){
//去除多余的ul
var treeFormat = getTree(data,pId).replaceAll("<ul></ul>","");
if(treeFormat.length>4){
//替换开头的"<ul>" 为 "<ul class='tree treeFolder'>" (添加tree属性)
treeFormat = "<ul class='tree treeFolder'>"+treeFormat.substring(4,treeFormat.length);
}
return treeFormat;
}
//构造tree节点
function getTree(data,pId){
var tree="";
tree = '<ul>';
for(var i in data){
if(data[i].pId == pId){
//判断是否为叶子节点
if(data[i].url!=null&&data[i].url.length>0){
//${pathStr} 为上面定义的项目名称
tree += "<li><a href='${pathStr}"+data[i].url+"' target='navTab' rel='"+data[i].rel+"'>"+data[i].name+"</a>";
}else{
tree += "<li><a href='#' target='_blank'>"+data[i].name+"</a>";
}
//递归
tree += getTree(data,data[i].id);
tree += "</li>";
}
}
return tree += "</ul>";
}
function getJTree(data,header){
var jTree="";
for(var i in data){
//构造accordion Header
if(data[i].pId==header){
jTree += "<div class='accordionHeader'><h2><span>Folder</span>"+data[i].name+"</h2></div>";
jTree += "<div class='accordionContent'>";
//递归构造accordion Content
jTree += getContente(data,data[i].id);
jTree += "</div>";
}
}
return jTree;
}
</script>
.........
<div id="sidebar">
<div class="toggleCollapse"><h2>******系统</h2><div>collapse</div></div>
<div id="jTree" class="accordion" fillSpace="sideBar"></div>
</div>
图: