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}">
<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>