二级菜单

来源：互联网发布：数据架构师培训编辑：程序博客网时间：2024/04/27 08:09

这里写图片描述

HTML<div id="horizontalMenu" class="homepage_menu">      <div onclick="getSecMenu(2)" class="item_menu active" id="2"><img src="indexue/images/tree-organisation.png" alt="权限管理">权限管理</div>      <div onclick="getSecMenu(3)" class="item_menu" id="3"><img src="indexue/images/tree-bug.png" alt="开发管理">开发管理</div><div onclick="getSecMenu(4)" class="item_menu" id="4"><img src="indexue/images/tree-apply.png" alt="系统管理">系统管理</div>      <div onclick="getSecMenu(29)" class="item_menu" id="29"><img src="indexue/images/tree-phone.png" alt="通知管理">通知管理</div>      <div onclick="getSecMenu(110003)" class="item_menu" id="110003"><img src="indexue/images/tree-edit-cut.png" alt="帮助中心">帮助中心</div>      <div onclick="getSecMenu(110011)" class="item_menu" id="110011"><img src="indexue/images/tree-comments.png" alt="会员管理">会员管理</div>      <div onclick="getSecMenu(110178)" class="item_menu" id="110178"><img src="indexue/images/tree-apply.png" alt="工会组织">工会组织</div>      <div onclick="getSecMenu(111137)" class="item_menu" id="111137"><img src="indexue/images/null.png" alt="企业转移">企业转移</div>      <div onclick="getSecMenu(111876)" class="item_menu" id="111876"><img src="indexue/images/tree-image.png" alt="查询统计">查询统计</div>      <div class="item_more" id="item_more" onclick="setMoreMenu(menuList)">...</div></div>

js:前端页面展示

function getSecMenu(menuId) {        var div='<div class="twoMenu" style="height: auto;"><div id="6" class="menu"><div class="menu_img"></div><div title="组织人员管理" class="menuleft_text">组织人员管理</div><span class="twoMenuUrl" style="display:none;">org/orgUserMgAction.do</span></div><div id="7" class="menu"><div class="menu_img"></div><div title="管理员权限管理" class="menuleft_text">管理员权限管理</div><span class="twoMenuUrl" style="display:none;">org/admin/adminUserMgAction.do</span></div><div id="8" class="menu"><div class="menu_img"></div><div title="经办用户权限管理" class="menuleft_text">经办用户权限管理</div><span class="twoMenuUrl" style="display:none;">org/position/positionUserMgAction.do</span></div><div id="9" class="menu"><div class="menu_img"></div><div title="相似权限授权" class="menuleft_text">相似权限授权</div><span class="twoMenuUrl" style="display:none;">org/position/similarAuthorityAction.do</span></div><div id="10" class="menu"><div class="menu_img"></div><div title="功能权限代理" class="menuleft_text">功能权限代理</div><span class="twoMenuUrl" style="display:none;">org/position/delegatePositionAction.do</span></div><div id="27" class="menu"><div class="menu_img"></div><div title="经办机构配置" class="menuleft_text">经办机构配置</div><span class="twoMenuUrl" style="display:none;">org/agencies/agenciesMgAction.do</span></div><div id="28" class="menu"><div class="menu_img"></div><div title="字段授权" class="menuleft_text">字段授权</div><span class="twoMenuUrl" style="display:none;">org/field/fieldAuthorMgAction.do</span></div></div>';         $("#"+menuId).after(div);         $(".twoMenu").each(function(index){            /* e.preventDefault();  */            var cc=$(".twoMenu").length;            console.log(cc);            if(cc>2){                $(".twoMenu").hide();                $(this).after(div);                console.log(this);               /*  var that=$(this); */               /*  var str = JSON.stringify(that);                console.log(str); */               /*  var reg = /.*(\d+).*/               /*  var str = "";                str = str.replace(reg, "$1") */                /*  return false; */            }            else{                $("#"+menuId).show();            }             });        $(".item_menu").removeClass("active");        $("#"+menuId).addClass("active");        $(".homepage_menu").attr("data-active",menuId);        $(".img").each(function() {            $(this).attr("src",$(this).attr("src").replace(/\_/g,""));        });        var src = $("#"+menuId+" > img")[0].src;//.replace(".png","_.png"); //yanglq        $("#"+menuId+"> img").removeAttr("src").attr("src", src);        menuClickId  = menuId;        var secMenu = null;        var menuObj = null;        if (menuList.length > 0) {            for (var i = 0; i < menuList.length; i++) {                if (menuList[i].menuId == menuId) {                    secMenu = menuList[i].childList;                    menuObj = menuList[i];                    break;                }            }        }        if (menuObj.url) {            IndexTabCsi.addTab(menuObj.menuId, menuObj.menuName, menuObj.url,                    function() {                    });        }        if (!secMenu)secMenu = [];        lm.setMenuLevelTwo(secMenu);    }    $("#tab_01").click(function() {        if ($(this).find("div").hasClass("gztClick")) {        } else {            $(this).find("div").addClass("gztClick");        }    });

jsp：从后台获取参数id

List menuList = (List)request.getAttribute("menuList");    String menuJson = JSonFactory.bean2json(menuList);    List firstMenuChild = new ArrayList();    Map firstMenu = new HashMap();    Map secMenu = new HashMap();    Map thMenu = new HashMap();    if(menuList != null && menuList.size()>0){        if(useLevelOneMenu.equals("true")){            firstMenu = (Map)menuList.get(0);            if(menuList.size()>1){                secMenu = (Map)menuList.get(1);            }else{                secMenu = (Map)menuList.get(0);            }            if(menuList.size()>2){                thMenu = (Map)menuList.get(2);            }else{                thMenu = (Map)menuList.get(0);            }            firstMenuChild = (List)firstMenu.get("childList");        }else{            firstMenuChild = menuList;        }    }

二级菜单：

<div class="menuBody">  <div class="leftMenu" style="height: 686px;">    <div class="controlMenu show" data-state="show"></div>      <div class="twoMenu" style="height: 686px;">        <div id="30" class="menu"><div class="menu_img"></div><div title="通知发送" class="menuleft_text">通知发送</div><span class="twoMenuUrl" style="display:none;">message/messageSend.do</span></div>        <div id="31" class="menu"><div class="menu_img"></div><div title="通知审核" class="menuleft_text">通知审核</div><span class="twoMenuUrl" style="display:none;">message/messageCheck.do</span></div>        <div id="32" class="menu"><div class="menu_img"></div><div title="通知删除" class="menuleft_text">通知删除</div><span class="twoMenuUrl" style="display:none;">message/messageDelete.do</span></div>        <div id="100" class="menu"><div class="menu_img"></div><div title="我的通知" class="menuleft_text">我的通知</div><span class="twoMenuUrl" style="display:none;">message/messageSearch.do</span></div></div></div>        <div id="menuThreeLevel" class="menu_tl" style="height: 696px; display: none;"><div class="menuThreeLevel_top"><div class="menuThreeLevel_top1"><div class="closeMenu"></div></div></div><hr class="hr_warm"><div class="mtlb" style="overflow-y: auto; height: 596px;"></div><div class="na"> </div></div></div>

js:显示二级菜单

//设置菜单栏中的模块分类 function setHorizontalMenu(menuList){// modify by cy    var $menu=$(".homepage_menu");    $(".item_menu").remove();//清空节点    var $item_more=$(".item_more");    var more_width=50;//更多选项的预设宽度    var items_width=0;    //装载 menu list    for(var i = 0; i < menuList.length; i++){        var item="<div onclick='getSecMenu(" + menuList[i].menuId +")' class='item_menu' id="+menuList[i].menuId+">" +            "<img  src='indexue/images/" + menuList[i].img +".png' alt='"+menuList[i].menuName+"'>"+menuList[i].menuName+"</div>";        $item_more.before(item);        var list_width=$menu.width();//总宽度        var item_width=getElWidth(menuList[i].menuId);//item宽度        items_width=items_width+item_width;//items宽度        /*if(items_width+more_width>list_width){//当加入元素宽度大于list的那么移除节点并加入更多菜单的选项卡            $("#"+menuList[i].menuId).remove();            $item_more.css("display","inline-block");            break;        }else {            $item_more.css("display","none");        }*/    }    if(menuList.length > 0){        //初始化选中项        var active_item=$(".homepage_menu").attr("data-active");        active_item ?  $("#"+active_item).addClass("active") :$("#"+menuList[0].menuId).addClass("active");    }}

阅读全文

0 0