一级菜单 二级菜单的联动

标签：

1.页面代码：单个集合循环生成一级和二级菜单

/* <c:forEach var="m" items="${list}" >
                              <c:if test="${m.mb.father eq ‘-1‘ }">
                                   <input type="checkbox" name="menuid" value="${m.mb.id }" id="father${m.mb.id}" onclick="father(${m.mb.id })"/>${m.mb.name }<br/>
                                   <c:forEach var="l" items="${list}">
                                   <c:if test="${m.mb.id==l.mb.father}">
                                   &nbsp;&nbsp;<input type="checkbox" name="menuid" value="${l.mb.id }" id="child${l.mb.father}" onclick="son(${l.mb.father})"/>${l.mb.name }<br/>
                                   </c:if>
                                   </c:forEach>
                              </c:if>
                         </c:forEach> */

/**
 * 全选   点击一级菜单     全选二级菜单
 * 重要思想       需要二级菜单有一个值表明当前二级菜单属于哪一个一级菜单
 *
 */
function father(id){    //调用方法是传入当前菜单的id
    var str = "child"+id; //二级菜单id    
    var father = document.getElementById("father"+id);//获取以及菜单id
    var flag = father.checked;//判断以及菜单是否选中
           var menus=document.getElementsByName("menuid");//获取所有菜单id
           for(i=0;i<menus.length;++i){//遍历
               var menu = menus[i];
               if(menu.id==str){//判断      是否属于当前一级菜单的二级菜单
                   menu.checked=flag;//属于          一级选中    则二级选中
               }
           }          
}


/**
 * 点击二级菜单      一级菜单点选
 * 重要思想：   假设二级菜单有兄弟菜单     取消或选中兄弟菜单不会对点选的一级菜单有所影响
 */
function son(id){  //传入当前二级菜单的一级菜单的id
    var flag = false;//提供一个标识符
    var father = "father"+id;//一级菜单的id
    var child = "child" + id;//二级菜单 的id
    var menus=document.getElementsByName("menuid");    //获取所有菜单信息   对菜单信息进行遍历
           for(i=0;i<menus.length;++i){
               var menu = menus[i];
               if(menu.id==child){//判断是否有兄弟菜单       有兄弟菜单    进入判断
                  flag=true;
                  
               }
           }
    father = document.getElementById(father);//获取一级菜单id
    father.checked=flag;//一级菜单选中
    
    }

2.获取数据的servlet代码

            List fatherMenus = ms.getFatherMenus(loginUser);
        session.setAttribute("fatherMenus", fatherMenus);//当前登录人的上级菜单
        // 获取子菜单
        Map childMenus = ms.getChildMenus(loginUser, fatherMenus);//传入上级菜单id获取上级菜单的子菜单
        session.setAttribute("childMenus", childMenus);//获取当前登录人的二级菜单

       获取一级菜单封装到一个集合中      list或map集合均可
      获取二级菜单封装到map集合中去         需要传入一级菜单的id     获取所对应的二级菜单     所以使用map 集合         key-value的存值方式  

        显示时：循环一级菜单的集合
                     触发事件时将当前菜单的id传入   表明点击的是当前菜单的展开的也是当前菜单的二级菜单
                     
                 循环二级菜单      传入一级菜单的id     显示一级菜单所对应的二级菜单
               el表达式中也可以使用集合的方法     获取当前一级菜单对应的二级菜单

JSP页面代码：
        <c:forEach var="father" items="${fatherMenus }">
                        <table cellspacing="0" cellpadding="0" width="150" border="0">
                            <tr height="22">
                                <td style="padding-left: 30px" background="img/menu_bt.jpg">
                                    <a class="menuparent" onclick="expand(${father.id })" href="javascript:void(0)" >${father.name}</a>
                                </td>
                            </tr>
                            <tr height="4">
                                <td></td>
                            </tr>
                        </table>
                        <table id="child${father.id }" style="display:none" cellspacing="0" cellpadding="0" width="150" border="0">
                            <c:forEach var="child" items="${childMenus.get(father.id) }">
                                <tr height="20">
                                    <td width="30">
                                        <img height="9" src="img/menu_icon.gif" width="9" >
                                    </td>
                                    <td>
                                        <a class="menuchild" href="${child.url}" target="right" >${child.name }</a>
                                    </td>
                                </tr>
                            </c:forEach>
                            <tr height=4>
                                                                                                             <td colspan=2></td>
                            </tr>
                        </table>
                    </c:forEach>

一级菜单 二级菜单的联动

标签：

原文地址：http://www.cnblogs.com/nihaofenghao/p/5084230.html