easyui 导航
1.首先引入easyui 相关js和样式。
2.构建树 <ul id="tree" class="easyui-tree"></ul>
请求后台组装json数据格式。
封装菜单需要的几个基本属性。前台js接收返回的数据自动构建树!
最重要的就是这个递归,根据一级目录,也就是所有的根节点,递归找他们的子节点,直至叶子节点。
权限集合,就是一个存在父子关系的菜单对象,根据父子关系,拼装成树。
最后的效果
可复制的核心代码:
<script type="text/javascript">
$(function(){
$("#tree").tree({
lines:true,
url:'${_currConText}/grant/view/menuTreeEasyUI.action?systemType=301',
onLoadSuccess:function(){
$("#tree").tree('collapseAll');
},
onClick:function(node){
if(node.state=='closed'&&(!$("#tree").tree('isLeaf',node.target))){ //状态为关闭而且非叶子节点
$(this).tree('expand',node.target);//点击文字展开菜单
if (node.attributes && node.attributes.url) {
openTab(node);
}
}else{
if($("#tree").tree('isLeaf',node.target)){ //状态为打开而且为叶子节点
if (node.attributes && node.attributes.url) {
openTab(node);
}
}else{
$(this).tree('collapse',node.target);//点击文字关闭菜单
}
}
}
});
function openTab(node){
if($("#tabs").tabs("exists",node.text)){
$("#tabs").tabs("select",node.text);
}else{
var content="<iframe frameborder=0 scrolling='auto' style='width:100%;height:100%' src='${pageContext.request.contextPath}"+node.attributes.url+"'></iframe>"
$("#tabs").tabs("add",{
title:node.text,
iconCls:node.iconCls,
closable:true,
content:content
});
}
}
});
function logout() {
if('${status}'==0){
window.parent.location = "${ctx}/login/logout/?ranNum=" + Math.random();
}else{
var sessid = '${sessionScope.sessid}';
var url = "${oauth_login_url}/public/login/isLogout.shtm?goto_url=${goto_url}/&sessid="+sessid;
window.parent.location=url;
}
}
</script>
@ResponseBody
@RequestMapping("menuTreeEasyUI")
public String menuTreeEasyUI(HttpServletRequest request,HttpServletResponse response) {
HttpSession session = request.getSession();
response.setContentType(contentType);
Integer type = RequestHandler.getInteger(request, "systemType");
Map con = new HashMap();
con.put("adminID", session.getAttribute(SessionName.ADMIN_USER_ID));
con.put("systemType", type);
//获得用户权限
List<Privilege> userPriList = privilegeService.getPriByUser(con);
List<TreeMenu> tmList = new ArrayList<TreeMenu>();//所有一级目录集合
for(Privilege p : userPriList){
if(p.getParentID()==-1){//父ID是-1说明是一级目录
TreeMenu menu = new TreeMenu();
menu.setId(p.getPrivilegeID()+"");
menu.setState("open");
menu.setText(p.getPrivilegeName());
menu.setIconCls("icon-man");
Map<String,String> attrMap = new HashMap<String, String>();
attrMap.put("url",p.getActionURL());
menu.setAttributes(attrMap);
List<TreeMenu> childList =getChildren(p,userPriList);
if(childList!=null&&childList.size()>0){//如果一级目录子目录不为空才展示出来
menu.setChildren(childList);
tmList.add(menu);
}
}
}
String jsonStr =JSON.toJSONString(tmList);//以一级目录为根,构建树的json字符串
return jsonStr;
}
/**
* 根据当前目录,递归找到其所有子节点
* @param p
* @param userPriList
* @return
* @date 20160914
* @author zhouzhenwei
*/
private List<TreeMenu> getChildren(Privilege p, List<Privilege> userPriList) {
if(p.getTreeType()==2){//type为2 代表叶子节点
return null;
}else{
List<TreeMenu> mList = new ArrayList<TreeMenu>();
for(Privilege cp : userPriList ){//在权限集合中找到,当前权限菜单的子节点
if((cp.getParentID()+1)==(p.getPrivilegeID()+1)){//如果某个菜单的父ID为当前菜单ID,那么就把它作为当前菜单的child
//封装菜单对象
TreeMenu tm = new TreeMenu();
tm.setId(cp.getPrivilegeID()+"");
tm.setState("open");
tm.setText(cp.getPrivilegeName());
tm.setIconCls("icon-lock");
Map<String,String> attrMap = new HashMap<String, String>();
attrMap.put("url",cp.getActionURL());
tm.setAttributes(attrMap);
tm.setChildren(getChildren(cp,userPriList));
mList.add(tm);
}
}
return mList;
}
}