easyui menu tree 实现左侧菜单树

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

发布了61 篇原创文章 · 获赞 40 · 访问量 25万+
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 大白 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览