首先看一下菜单的样子
根据这个样子我们定义菜单类
public class Menu {
// 菜单id
private String id;
// 菜单名称
private String name;
// 父菜单id
private String parentId;
// 菜单url
private String url;
// 菜单图标
private String icon;
// 菜单顺序
private int order;
// 子菜单
private List<Menu> childMenus;
// ... 省去getter和setter方法以及toString方法
}
我们根据这个类定义数据库,并插入菜单数据
meuDao
测试程序的运行结果,对输出的 json 进行个格式化后的对比
最终效果
如果你也使用 sbadmin 后台模版的话,它只做到了二级菜单,三级的没有做展开控制。
要做到三级将 sb-admin-2.js 的最后一个替换成下面的。
if (element.is('li')) { element.addClass('active'); element.parent().addClass('in'); }
再奉上前端 jsp 页面输出菜单的代码
<c:forEach items="${userMenuList }" var="menu" varStatus="status"> <!-- 一级子菜单没有parentId,有url --> <c:if test="${empty menu.parentId and not empty menu.url}"> <li> <a href="<c:url value='${menu.url }'/>"> <i class="${menu.icon } fa-fw"></i> ${menu.name } </a> </li> </c:if> <!-- 可展开的一级菜单,没有parentId,有url --> <c:if test="${empty menu.parentId and empty menu.url}"> <li> <a href="#"> <i class="${menu.icon } fa-fw"></i> ${menu.name }<span class="fa arrow"></span> </a> <ul class="nav nav-second-level"> <!-- 没有url的是三级菜单,有url的直接输出到li中 --> <c:forEach items="${menu.childMenus}" var="secondChild" varStatus="status"> <c:if test="${not empty secondChild.url }"> <li> <a href="<c:url value='${secondChild.url }'/>">${secondChild.name }</a> </li> </c:if> <!-- 二级菜单url为空,表示还有三级菜单 --> <c:if test="${empty secondChild.url }"> <li> <a href="#">${secondChild.name }<span class="fa arrow"></span></a> <ul class="nav nav-third-level"> <c:forEach items="${secondChild.childMenus}" var="thirdChild" varStatus="status"> <li> <a href="<c:url value='${thirdChild.url }'/>">${thirdChild.name }</a> </li> </c:forEach> </ul> </li> </c:if> </c:forEach> </ul> </li> </c:if> </c:forEach> 转载自:http://blog.csdn.net/frankcheng5143/article/details/52958486
欢迎来到这里!
我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。
注册 关于