2023年7月9日发(作者：)

⽆限级菜单mysql设计_⽆限级菜单简单的设计策略：数据库就⼀张表，前端查询出所有的可显⽰的菜单，在前端进⾏循环展⽰。1，数据库表的设计CREATE TABLEsys_menu (idINT NOT NULLAUTO_INCREMENT,nameVARCHAR(64) NOT NULL,urlVARCHAR(255),pidINT NOT NULL DEFAULT 0,isLeafTINYINT NOT NULL DEFAULT 1COMMENT'0表⽰不是叶⼦，1表⽰是叶⼦',statusTINYINT NOT NULL DEFAULT 1COMMENT'0表⽰禁⽤，1表⽰启⽤',seqTINYINT NOT NULL DEFAULT 0COMMENT'同级中的顺序，0-n，从上到下',PRIMARY KEY(id));把菜单当作⼀个多叉树，root节点为虚拟节点，id为0。第⼀层节点表⽰⼀级菜单，以此类推。其中，isLeaf表⽰该菜单是不是叶⼦节点。简单的填充数据如下所⽰：2，查询所有菜单的接⼝(略，简单的sql查询)需要过滤status=0，也就是禁⽤的菜单。3，前端展⽰3.1 html代码和css样式body中就是如下简单的代码css样式(从⽹上随便找的)a{text-decoration:none;}ul, li{list-style:none;margin:0;padding:0;}/*定义菜单*/.Menue li{background:#111;color:#fff;height:30px;line-height:30px;position:relative;float:left;margin-right:5px;width:100px;text-align:center;font-family:Arial, Helvetica, sans-serif;}.Menue li a{color:#fff;font-size:14px;display:block;}/*下拉菜单样式*/_menu{position:absolute;width:100px;display:none;z-index:999;}.Menue li _menu li{background:none;color:#555;font-size:12px;border-bottom:1px #333solid;position:relative;width:100px;height:30px;}.Menue li _menu {border-bottom:none;}/*js会对最后⼀个li添加该class，去掉border-bottom效果*/.Menue li _menu lia{background:#222;color:#888;display:block;height:30px;}.Menue li _menu li a:hover, .Menue li _menu li {background:#f90;color:#fff;}.Menue , .Menue t{background:#f60;color:#fff;}/*如果有下拉菜单添加的class*/.hasmenu{background:url() no-repeat right;padding-right:15px;}/*主导航箭头向下*/.Menue li u{background:url() no-repeat right;padding-right:15px;background-position:right -30px;}/*下拉菜单箭头向右*/.Menue li _menu li u{background:#222 url() no-repeat right top;}.Menue li _menu li u:hover{background:#f90 url() no-repeat right top;color:#fff;}3.2 jquery ajax获取所有的菜单数据$.ajax({type:"GET",url:"/menu/",dataType:"json",success:function(result) {if ( > 0) {//获取到菜单数据，进⾏展⽰//1,展⽰顶级菜单var list =;vari;for (i = 0; i < ; i++) {//(typeof list[i].url == 'undefined');//如果url不存在，则为undefined，应该⽤typeof判断}//$(".Menue").html("");$(".Menue").html(showFirstLevelMenu(list));(showFirstLevelMenu(list))//在菜单全部显⽰后，增加hover件事addHover();}else{alert(e);}},error:function() {alert("服务器故障，请刷新或稍后重试!");}})当获取到数据后，将数据拼装成节点html数据，设置到class=Menu的ul中。然后对动态添加的html代码段加上hover事件$(".Menue").html(showFirstLevelMenu(list));//在菜单全部显⽰后，增加hover事件addHover();3.3 递归拼接使⽤递归调⽤实现拼接⼦菜单functionshowFirstLevelMenu(list) {//class = Menu_li//遍历list找到var menu = "";var subList = newArray();vari;for (i = 0; i < ; i++) {if (list[i].pid == 0) {(list[i]);}}(function(a, b) {return - ;//从⼩到⼤排序});alert()for (i = 0; i < ; i++) {menu+= '' + showSubMenu(list, subList[i]) + '';}returnmenu;}functionshowSubMenu(list, menuInfo) {//class = sub_menuvar menu = '';if ( == 0) {//有⼦菜单var subList = newArray();vari;for (i = 0; i < ; i++) {if (list[i].pid ==) {(list[i]);}}if ( != 0) {(function(a, b) {return - ;//从⼩到⼤排序});menu+= '';for (i = 0; i < ; i++) {menu+= '' + showSubMenu(list, subList[i]) + '';}menu+= '';}}returnmenu;}3.4 hover事件(⽹上粘贴的)functionaddHover() {//为导航设置默认⾼亮 与本菜单⽆关$(" _li:eq(0)").addClass("current")/*jquery menu 开始*///为⼦菜单的最后⼀个li添加样式，适合为li添加下划线时去除最后⼀个的下划线$(".sub_menu").find("li:last-child").addClass("last")//遍历全部li，判断是否包含⼦菜单，如果包含则为其添加箭头指⽰状态$(".Menue li").each(function() {if ($(this).find("ul").length != 0) {$(this).find("a:first").addClass("hasmenu")}})//$(".Menue li").hover(function() {$(this).addClass("now");var menu = $(this);("_menu:first").show();},function() {$(this).removeClass("now");$(this).find("_menu:first").hide();});var submenu = $(".sub_menu").find(".sub_menu")({left:"100px", top: "0px"})$(".sub_menu li").hover(function() {$(this).find("a:first").addClass("now")$(this).find("ul:first").show();},function() {$(this).find("a:first").removeClass("now")$(this).find("ul:first").hide()});/*jquery menu 结束*/}3.5 最终页⾯显⽰结果=====>>=====>>