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

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

技术:easyUi+spring+spingMvc+mybiatis

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

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

废话不多说:

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

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

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

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

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

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

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

这里我们就要从前台获取一个数据 <ul><li id="1">仓库管理</li><li id="2">系统管理</li></ul> 根据前台数据匹配数据

这里我们对应的菜单数据的最基础的一级菜单 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);
        });

<ul class="topmenu">
            
                <li><a href="#4" class="c5" mId="4"> <img
                      
 src="${pageContext.request.contextPath}/resources/images/icons/timg.jpg" />
                        <span>仓库管理</span></a></li>

而下面的子菜单的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<TreeModel> result = new ArrayList<TreeModel>();
        TreeModel model = null;
        //获取二级菜单和三级菜单
        List<sysMenu> 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<sysMenu> childrens = menumapper.findMenuInfos(son);
            if (childrens.size() > 0) {
                List<TreeModel> 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<TreeModel>);

第三步 前台解析:

<c:forEach var="menu" items="${menus }">
        <!-- 二级菜单 -->
        <c:forEach var="node" items="${menu.children }">
            
            <ph:rightFilter url="${node.attributes.url }">
                <!-- 具有三级菜单 -->
                <c:if test="${fn:length(node.children)>0 }">
                    <div class="menuitem">
                        <h5 id="menutitle-${node.id}" 
                          
 style="background-image:url(${pageContext.request.contextPath}/resources/images/icons/system.png);">
                                ${node.text }
                        </h5>
                        <div id = "menucon-${node.id}" class="mcon paperfold">
                            <ul>
                            <c:forEach var="n" items="${node.children }">
                                <ph:rightFilter url="${n.attributes.url }">
                                    <li>
                                        <a
href="${pageContext.request.contextPath }/${n.attributes.url }"
                                          
style="background-image:url(${pageContext.request.contextPath}/resources/images/icons/usermanager.png);"
                                              target="mainFrame">${n.text
}</a>
                                    </li>
                                </ph:rightFilter>
                            </c:forEach>
                            </ul>
                        </div>
                    </div>
                    
                    <script type="text/javascript">
                        $('#menucon-${node.id}').paperfold({
                            'toggle': $("#menutitle-${node.id}"),
                            'folds': 2
                        });
                    </script>
                    
                </c:if>
                <!-- 只有二级菜单 -->
                <c:if test="${fn:length(node.children)==0 }">
                    <ph:rightFilter url="${node.attributes.url }">
                        <p><a href="${pageContext.request.contextPath
}/${node.attributes.url }" class="cs-navi-tab" target="mainFrame">${node.text
}</a></p>
                    </ph:rightFilter>
                </c:if>
            </ph:rightFilter>
            
        </c:forEach>
    </c:forEach>

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

 

 

 

 

 

 

 

技术
下载桌面版
GitHub
百度网盘(提取码:draw)
Gitee
云服务器优惠
阿里云优惠券
腾讯云优惠券
华为云优惠券
站点信息
问题反馈
邮箱:[email protected]
QQ群:766591547
关注微信