菜单栏根据后台数据自动生成

最近遇到一个问题  需要给个人分权限查看不同的菜单

以前权限问题是定义一个数据库表 根据权限不同赋予不同的权限 从数据库获取菜单 比较灵活 所以就做了这个肯定有很多不足 希望可以和大家共同学习

技术：easyUi+spring+spingMvc+mybiatis

为什么要用easyui呢 因为简单易上手 而且他还有经典的三项布局 layout

这样可以省下自己很多的css布局 而且比较美观 比较符合一些管理系统的页面审美 里面有很多模板 如果大家有没有学习的 可以去看看 ！！

废话不多说：

菜单呢  是有分级的 分级最经典的布局就是Tree 就是树结构 所以呢  我们要一个树的model

    private int id;
    private String text; 树名
    private String state = "open"; 是否展开
    private boolean checked;是否勾选
    private Map attributes = new HashMap();其他信息 比如url
    private List children = new ArrayList(); 子节点

然后有树形结构了 还没数据呢 没数据就没办法往前台传送数据  对不对 所以呢  我们要有一个存放数据的地方 这就是单数据

既然是菜单 数据 那么我们的数据里面的字段也很好建了

id  URL  title   pid (父亲ID）`sort`  '排序', `serials`  '层级',`rightPos`'权限位',`rightCode`'权限码'

基础数据已经准备好 接下来 我们要做的就是怎么读取数据库中的数据去在前台显示

我们要是在前台显示 而且还要根据自己的需求显示 比如我们做一个进销存管理系统 仓库管理 我们就让他显示采购 销售模块 系统设置 我们就要求显示修改密码 用户信息模块  所以我们怎么区分呢

这里我们就要从前台获取一个数据

• 仓库管理
• 系统管理

根据前台数据匹配数据

这里我们对应的菜单数据的最基础的一级菜单 id 就有了对应的id 1和2

$(function(){
        //动态加载主菜单:二级菜单
        $('.topmenu li').click(function(){
            var id=$(this).children("a").attr("mId");
            console.info(id);
            $("#menu").attr("src","${pageContext.request.contextPath }/menu?id="+id);
        });

            
                
•                         src="${pageContext.request.contextPath}/resources/images/icons/timg.jpg" />
                          仓库管理

而下面的子菜单的pid(父级菜单也有了数据） 

既然前台传回了数据 那么我们后台是不是也要接受 所以我们要写一个controller接受

参数是不是应该有 Integer id,HttpServletRequest request  传后来id之后 我们是不是应该做查询了 根据这个id 查询他的下级菜单

我们查询出来数据是所有的二级菜单 因为一级菜单我们在前台已经赋值id了 所以 我们查询出来serials 等于0 的一级菜单然后根据id=pid查询出来二级菜单

查询出来的一级菜单我们一般情况下不会是一个 吧 所以我们要用list封装 list<菜单> 封装 然后for循环

tree set进去所有的一级菜单目录  然后根据一级菜单的id=pid 并且 serials =1查询出来二级菜单 

同理 我们也这样查询出来三级 四级。。。

然后我们插入到tree里面 然后add list里面 就这样一级一级的循环

    List result = new ArrayList();
        TreeModel model = null;
        //获取二级菜单和三级菜单
        List menuInfos = menumapper.findMenuInfos(parent);
        for (sysMenu menu : menuInfos) {
            if(!containtButton&&menu.getisButton()){//如果是按钮则
                continue;
            }
            model = new TreeModel();
            model.setId(menu.getId());
            model.setText(menu.getTitle());
            model.getAttributes().put("url", menu.getUrl());
            // 计算孩子节点：下级菜单
            sysMenu son = new sysMenu();
            son.setpId(menu.getId());
            son.setSerials(menu.getSerials() + 1);
            //根据pid和Serials层级获取三级菜单
            List childrens = menumapper.findMenuInfos(son);
            if (childrens.size() > 0) {
                List nbc = getChildrens(son,containtButton);
                if(nbc.size()!=0){
                    model.setState("closed");
                    model.setChildren(nbc);
                }
            }
            result.add(model);
            model = null;
        }
        return result;
    }

第二步：我们整理传过来的数据 传递到前台 我们封装到 list< 菜单>里面

request.setAttribute("menus",List);

第三步 前台解析：


        
        
            
            
                
                
                    


                        
                            style="background-image:url(${pageContext.request.contextPath}/resources/images/icons/system.png);">
                                ${node.text }
                        

                        

                            

                            
                                
                                    
• 
                                                                                      style="background-image:url(${pageContext.request.contextPath}/resources/images/icons/usermanager.png);"
                                                target="mainFrame">${n.text }
                                      

                                
                            
                            

                        

                    

                    
                    
                    
                
                
                
                    
                        

${node.text }


                    
                
            
            
        
    

这样我们就完整的获取了菜单栏 最后附上菜单栏显示结果