javaweb 获取用户菜单数据,前端循环遍历生成三级菜单

后台action方法

//登录系统入口,用户名检测,菜单获取等。
    public String portal() {
        User existUser=userService.getUserByNameAndPassword(user);
        if(existUser==null){
            this.addActionError("登录账号或者密码错误!");
            return LOGIN;
        }
        else {
            ServletActionContext.getRequest().getSession().setAttribute("LoginUser", existUser);
            List<Menu> menuList = menuService.getUserMenuList(existUser);
            ActionContext.getContext().getValueStack().set("userMenuList", menuList);

            return "index";
        }

    }

mysql数据库表情况

jsp页面代码,循环遍历获取,有部门冗余数据还没删,做参考。

<%--
  Created by IntelliJ IDEA.
  User: xilinxiao
  Date: 2018/11/12
  Time: 20:29
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ include file="/common/taglibs.jsp"%>
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="renderer" content="webkit">

  <title> hAdmin- 主页</title>

  <meta name="keywords" content="">
  <meta name="description" content="">

  <!--[if lt IE 9]>
  <meta http-equiv="refresh" content="0;ie.html" />
  <![endif]-->

  <link rel="shortcut icon" href="${ctx}/favicon.ico"> <link href="${ctx}/css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
  <link href="${ctx}/css/font-awesome.min.css?v=4.4.0" rel="stylesheet">
  <link href="${ctx}/css/animate.css" rel="stylesheet">
  <link href="${ctx}/css/style.css?v=4.1.0" rel="stylesheet">
</head>

<body class="fixed-sidebar full-height-layout gray-bg" style="overflow:hidden">
<div id="wrapper">
  <!--左侧导航开始-->
  <nav class="navbar-default navbar-static-side" role="navigation">
    <div class="nav-close"><i class="fa fa-times-circle"></i>
    </div>
    <div class="sidebar-collapse">
      <ul class="nav" id="side-menu">
        <li class="nav-header">
          <div class="dropdown profile-element">
            <a data-toggle="dropdown" class="dropdown-toggle" href="#">
                                <span class="clear">
                                    <span class="block m-t-xs" style="font-size:20px;">
                                        <i class="fa fa-area-chart"></i>
                                        <strong class="font-bold">hAdmin</strong>
                                    </span>
                                </span>
            </a>
          </div>
          <div class="logo-element">hAdmin
          </div>
        </li>
        <li class="hidden-folded padder m-t m-b-sm text-muted text-xs">
          <span class="ng-scope">分类</span>
        </li>
        <li>
          <a class="J_menuItem" href="index_v1.html">
            <i class="fa fa-home"></i>
            <span class="nav-label">主页</span>
          </a>
        </li>
        <li>
          <a href="#">
            <i class="fa fa fa-bar-chart-o"></i>
            <span class="nav-label">统计图表</span>
            <span class="fa arrow"></span>
          </a>
          <ul class="nav nav-second-level">
            <li>
              <a class="J_menuItem" href="graph_echarts.html">百度ECharts</a>
            </li>
            <li>
              <a class="J_menuItem" href="graph_flot.html">Flot</a>
            </li>
            <li>
              <a class="J_menuItem" href="graph_morris.html">Morris.js</a>
            </li>
            <li>
              <a class="J_menuItem" href="graph_rickshaw.html">Rickshaw</a>
            </li>
            <li>
              <a class="J_menuItem" href="graph_peity.html">Peity</a>
            </li>
            <li>
              <a class="J_menuItem" href="graph_sparkline.html">Sparkline</a>
            </li>
            <li>
              <a class="J_menuItem" href="graph_metrics.html">图表组合</a>
            </li>
          </ul>
        </li>
        <li class="line dk"></li>
        <li class="hidden-folded padder m-t m-b-sm text-muted text-xs">
          <span class="ng-scope">分类</span>
        </li>
        <li>
          <a href="mailbox.html"><i class="fa fa-envelope"></i> <span class="nav-label">信箱 </span><span class="label label-warning pull-right">16</span></a>
          <ul class="nav nav-second-level">
            <li><a class="J_menuItem" href="mailbox.html">收件箱</a>
            </li>
            <li><a class="J_menuItem" href="mail_detail.html">查看邮件</a>
            </li>
            <li><a class="J_menuItem" href="mail_compose.html">写信</a>
            </li>
          </ul>
        </li>

        <c:forEach items="${userMenuList}" var="menulist" varStatus="status">
          <!-- 一级子菜单没有parentId,有url -->
          <c:if test="${ menulist.parentId==0 and not empty menulist.url}">
            <li>
              <a class="J_menuItem" href="<c:url value='${menulist.url}'/>">
                <i class="${menulist.icon} fa-fw"></i>
                <span class="nav-label">${menulist.name}</span>
              </a>
            </li>
          </c:if>
          <!-- 可展开的一级菜单,没有parentId,没有url -->
          <c:if test="${menulist.parentId==0 and empty menulist.url}">
            <li>
              <a href="#">
                <i class="${menulist.icon} fa-fw"></i>
                <span class="nav-label">${menulist.name}</span>
                <span class="fa arrow"></span>
              </a>
              <ul class="nav nav-second-level">
                <!-- 没有url的是三级菜单,有url的直接输出到li中 -->
                <c:forEach items="${menulist.childMenus}" var="secondChild" varStatus="status">
                  <c:if test="${not empty secondChild.url}">
                    <li>
                      <a class="J_menuItem" 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 class="J_menuItem" href="<c:url value='${thirdChild.url}'/>">${thirdChild.name}</a>
                          </li>
                        </c:forEach>
                      </ul>
                    </li>
                  </c:if>
                </c:forEach>
              </ul>
            </li>
          </c:if>
        </c:forEach>

     </ul>
    </div>
  </nav>
  <!--左侧导航结束-->
  <!--右侧部分开始-->
  <div id="page-wrapper" class="gray-bg dashbard-1">
    <div class="row border-bottom">
      <nav class="navbar navbar-static-top" role="navigation" style="margin-bottom: 0">
        <div class="navbar-header"><a class="navbar-minimalize minimalize-styl-2 btn btn-info " href="#"><i class="fa fa-bars"></i> </a>
          <form role="search" class="navbar-form-custom" method="post" action="${ctx}/search_results.html">
            <div class="form-group">
              <input type="text" placeholder="请输入您需要查找的内容 …" class="form-control" name="top-search" id="top-search">
            </div>
          </form>
        </div>
        <ul class="nav navbar-top-links navbar-right">
          <li>${LoginUser.getUserName()}</li>
          <li class="dropdown">
            <a class="dropdown-toggle count-info" data-toggle="dropdown" href="#">
              <i class="fa fa-envelope"></i> <span class="label label-warning">16</span>
            </a>
            <ul class="dropdown-menu dropdown-messages">
              <li class="m-t-xs">
                <div class="dropdown-messages-box">
                  <a href="profile.html" class="pull-left">
                    <img alt="image" class="img-circle" src="img/a7.jpg">
                  </a>
                  <div class="media-body">
                    <small class="pull-right">46小时前</small>
                    <strong>小四</strong> 是不是
                    <br>
                    <small class="text-muted">3天前 2014.11.8</small>
                  </div>
                </div>
              </li>
              <li class="divider"></li>
              <li>
                <div class="dropdown-messages-box">
                  <a href="profile.html" class="pull-left">
                    <img alt="image" class="img-circle" src="img/a4.jpg">
                  </a>
                  <div class="media-body ">
                    <small class="pull-right text-navy">25小时前</small>
                    <strong>二愣子</strong> 呵呵
                    <br>
                    <small class="text-muted">昨天</small>
                  </div>
                </div>
              </li>
              <li class="divider"></li>
              <li>
                <div class="text-center link-block">
                  <a class="J_menuItem" href="mailbox.html">
                    <i class="fa fa-envelope"></i> <strong> 查看所有消息</strong>
                  </a>
                </div>
              </li>
            </ul>
          </li>
          <li class="dropdown">
            <a class="dropdown-toggle count-info" data-toggle="dropdown" href="#">
              <i class="fa fa-bell"></i> <span class="label label-primary">8</span>
            </a>
            <ul class="dropdown-menu dropdown-alerts">
              <li>
                <a href="mailbox.html">
                  <div>
                    <i class="fa fa-envelope fa-fw"></i> 您有16条未读消息
                    <span class="pull-right text-muted small">4分钟前</span>
                  </div>
                </a>
              </li>
              <li class="divider"></li>
              <li>
                <a href="profile.html">
                  <div>
                    <i class="fa fa-qq fa-fw"></i> 3条新回复
                    <span class="pull-right text-muted small">12分钟钱</span>
                  </div>
                </a>
              </li>
              <li class="divider"></li>
              <li>
                <div class="text-center link-block">
                  <a class="J_menuItem" href="notifications.html">
                    <strong>查看所有 </strong>
                    <i class="fa fa-angle-right"></i>
                  </a>
                </div>
              </li>
            </ul>
          </li>
          <li><a href="${ctx}/sys/login!logout.action"><span class="fa fa-times"></span></a></li>
        </ul>
      </nav>
    </div>
    <div class="row J_mainContent" id="content-main">
      <iframe id="J_iframe" width="100%" height="100%" src="${ctx}/index_v1.html?v=4.0" frameborder="0" data-id="index_v1.html" seamless></iframe>
    </div>
  </div>
  <!--右侧部分结束-->
</div>

<!-- 全局js -->
<script src="${ctx}/js/jquery.min.js?v=2.1.4"></script>
<script src="${ctx}/js/bootstrap.min.js?v=3.3.6"></script>
<script src="${ctx}/js/plugins/metisMenu/jquery.metisMenu.js"></script>
<script src="${ctx}/js/plugins/slimscroll/jquery.slimscroll.min.js"></script>
<script src="${ctx}/js/plugins/layer/layer.min.js"></script>

<!-- 自定义js -->
<script src="${ctx}/js/hAdmin.js?v=4.1.0"></script>
<script type="text/javascript" src="${ctx}/js/index.js"></script>

<!-- 第三方插件 -->
<script src="${ctx}/js/plugins/pace/pace.min.js"></script>
</body>

</html>

 

/**************************************************************补上java内容

//查询菜单menu清单

public class MenuDaoImpl implements MenuDao {
    @Override
    public List<Menu> findTree() {
        List<Menu> list=null;
        Transaction transaction=null;
        try{
            Session session= MyHibernateSessionFactory.getSessionFactory().getCurrentSession();
            transaction=session.beginTransaction();
            String sql="from Menu ";
            Query query=session.createQuery(sql);
            list=query.list();
            transaction.commit();
            return list;
        }catch (Exception e){
            e.printStackTrace();
            transaction.commit();
            return list;

        }finally {
            if(transaction!=null)
            {
                transaction=null;
            }
        }

    }
}

//service组合处理


public class MenuServiceImpl  implements MenuService{

    /*
  * 排序,根据order排序
  */
    public Comparator<Menu> order(){
        Comparator<Menu> comparator = new Comparator<Menu>() {
            @Override
            public int compare(Menu o1, Menu o2) {
                if(o1.getOrder() != o2.getOrder()){
                    return o1.getOrder() - o2.getOrder();
                }
                return 0;
            }
        };
        return comparator;
    }

    public List getMenuJson(){
        Map<String,Object> data = new HashMap<String,Object>();
        try {//查询所有菜单
            MenuDao menuDao=new MenuDaoImpl();
            List<Menu> allMenu = menuDao.findTree();
            //根节点
            List<Menu> rootMenu = new ArrayList<Menu>();
            for (Menu nav : allMenu) {
                if(nav.getPid()==0){//父节点是0的,为根节点。
                    rootMenu.add(nav);
                }
            }
      /* 根据Menu类的order排序 */
            Collections.sort(rootMenu, order());
            //为根菜单设置子菜单,getClild是递归调用的
            for (Menu nav : rootMenu) {
        /* 获取根节点下的所有子节点 使用getChild方法*/
                List<Menu> childList = getChild(nav.getId(), allMenu);
                nav.setChildren(childList);//给根节点设置子节点
            }
            /**
             * 输出构建好的菜单数据。
             *
             */
            data.put("list", rootMenu);
            return rootMenu;
        } catch (Exception e) {
            e.printStackTrace();
            data.put("success", "false");
            data.put("list", new ArrayList());
            return new ArrayList<Menu>();
        }
    }


    /**
     * 获取子节点
     * @param id 父节点id
     * @param allMenu 所有菜单列表
     * @return 每个根节点下,所有子菜单列表
     */
    public List<Menu> getChild(Integer id,List<Menu> allMenu){
        //子菜单
        List<Menu> childList = new ArrayList<Menu>();
        for (Menu nav : allMenu) {
            // 遍历所有节点,将所有菜单的父id与传过来的根节点的id比较
            //相等说明:为该根节点的子节点。
            if(nav.getPid().equals(id)){
                childList.add(nav);
            }
        }
        //递归  如果还有第三级及无限极 ,下面这3行开放
        // for (Menu nav : childList) {
        //      nav.setChildren(getChild(nav.getId(), allMenu));
        //  }
        Collections.sort(childList,order());//排序
        //如果节点下没有子节点,返回一个空List(递归退出)
        if(childList.size() == 0){
            return new ArrayList<Menu>();
        }
        return childList;
    }


}

 

本文应用的是hAdmin这个前端后台模板,大家可以百度。

 

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
三级联动下拉菜单是指在一个下拉菜单选择某一项后,会根据该项的值,在另一下拉菜单中展示相应的选项,以此类推,构一个层级结构的下拉菜单。在基于AJAX的JavaWeb开发中,可以通过异步请求获取后台数据,实现三级联动下拉菜单的动态更新。 以下是一个基于AJAX的三级联动下拉菜单实现步骤: 1. 创建三个下拉菜单,分别表示三个层级的选项。 2. 在页面加载时,通过AJAX请求获取第一级选项的数据,并将其填充到第一个下拉菜单中。 3. 给第一个下拉菜单添加change事件监听器,在选项改变时,获取选中的值,并通过AJAX请求获取该值对应的第二级选项数据,并将其填充到第二个下拉菜单中。 4. 给第二个下拉菜单添加change事件监听器,在选项改变时,获取选中的值,并通过AJAX请求获取该值对应的第三级选项数据,并将其填充到第三个下拉菜单中。 5. 最终选中的三个层级的值可以通过JavaScript代码拼接而,或者提交给后台进行处理。 下面是一个简单的示例代码: ```html <!-- 页面中的三个下拉菜单 --> <select id="level1"> <option value="">请选择</option> </select> <select id="level2"> <option value="">请选择</option> </select> <select id="level3"> <option value="">请选择</option> </select> <script type="text/javascript"> // 页面加载时获取第一级选项数据 $(function() { $.ajax({ type: "GET", url: "getLevel1Data.action", success: function(data) { // 将数据填充到第一级下拉菜单中 $("#level1").html(data); } }); }); // 第一级下拉菜单改变时获取第二级选项数据 $("#level1").change(function() { var level1Value = $(this).val(); if (level1Value != "") { $.ajax({ type: "GET", url: "getLevel2Data.action", data: {level1Value: level1Value}, success: function(data) { // 将数据填充到第二级下拉菜单中 $("#level2").html(data); } }); } else { $("#level2").html("<option value=''>请选择</option>"); $("#level3").html("<option value=''>请选择</option>"); } }); // 第二级下拉菜单改变时获取三级选项数据 $("#level2").change(function() { var level2Value = $(this).val(); if (level2Value != "") { $.ajax({ type: "GET", url: "getLevel3Data.action", data: {level2Value: level2Value}, success: function(data) { // 将数据填充到第三级下拉菜单中 $("#level3").html(data); } }); } else { $("#level3").html("<option value=''>请选择</option>"); } }); </script> ``` 在上述代码中,使用了jQuery库来简化AJAX请求的操作,具体实现方式可以根据实际需求进行修改。另外,需要在后台编写相应的处理方法来返回各级选项的数据
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值