js实现递归菜单无限层

/*动态加载菜单*/
		function dynamicMenu(data){
			if (userID != "admin"){
				//1.清空所有菜单
				$("#menuList").empty();
				//2.添加用户配置菜单 递归生成
				var rootArr = new Array();
				$.each( data, function(index, content)
				{
					var id = content.id;
					var name = content.name;
					var operate = content.operate;
					var parentId = content.parentID;
					if (null == parentId || parentId == ""){
						$("#menuList").append(‘<li><a id=‘ + id + ‘ href="‘ + operate + ‘"><i class="fa fa-lg fa-fw fa-folder-open"></i> <span class="menu-item-parent">‘ + name + ‘</span></a></li>‘);
						rootArr.push(content);
					}
				});

				var treeData = changeDataToKV(data);
				var result = createMenuTree(data);
				for(var i=0;i<rootArr.length;i++){
					buildMenu(treeData,result,rootArr[i].id,rootArr[i].parentID);
				}
			}
		}

		function createMenuTree(data){
			//创建搜索键值对
			var result = {};
			for(var i=0;i<data.length;i++) {
				var id = data[i].id;
				var pId = data[i].parentID;
				if(pId){
					if(!result[pId] && pId != null && pId != ""){
						result[pId] = [];
					}
					result[pId].push(id);
				}
			}
			return result;
		}

		function changeDataToKV(data){
			var deepMap = new Array();
			for(var i=0;i<data.length;i++){
				if(data[i].id){
					deepMap[data[i].id] = data[i];
				}
			}
			return deepMap;
		}

		function buildMenu(treeData,result,id,pId){
			if(pId){
				// 1.先把自己append到父节点中
				var obj = treeData[id];
				$("#menuList li a[id=" + pId + "]").next().append("<li><a id=" + id + " href=" + obj.operate + "><i class=‘fa fa-fw fa-folder-open‘></i>" + obj.name + "</a></li>");
			}
			var childrenIds = result[id];
			if(childrenIds){
				$("a[id="+id+"]").after("<ul></ul>");
				for(var i=0;i<childrenIds.length;i++){
					 buildMenu(treeData,result,childrenIds[i],id);
				}
			}
		}

		/*根据角色ID查询角色下的菜单*/
		getMenuByRoleIdForIndex(roleId);
		function getMenuByRoleIdForIndex(roleId){
			$.ajax({
		        type: "POST",
		        dataType: "json",
		        url: ‘getMenuByRoleId.do‘,
		        data:{roleId:roleId},
		        beforeSend: function(XMLHttpRequest) {
		   		    XMLHttpRequest.setRequestHeader("token",token);
		   		},
		        success: function (data) {
		        	var menuData = data.data;
		        	dynamicMenu(menuData);
		        },
		        error: function(data) {
		        	ZD.showWarning("error:"+data.responseText);
		        },
		        async:false
			});
		}

  

时间: 2024-08-30 05:30:22

js实现递归菜单无限层的相关文章

问答项目---递归重新排序无限极子分类数组

递归重新排序无限极子分类数组方法: // 递归重新排序无限极子分类数组 function recursive($array,$pid=0,$level=0){ $arr = array(); foreach ($array as $v) { if($v['pid'] == $pid){ $v['level'] = $level; $v['html'] = str_repeat('--',$level); $arr[] = $v; $arr = array_merge($arr,recursive

纯css+js下拉菜单实例代码

纯css+js下拉菜单实例代码 分享一个css+js下拉菜单代码,js+css实现的简单下拉菜单,兼容性不错. 例子:<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <

原生js实现三个div层动态交换位置

html代码部分 <!--触发变换按钮--> <input type="button" onclick="startMove()" value="点击"/> <!--主体部分--> <div class="localbox"> <div id="b1" class="block1"></div> <div id

CSS+JS下拉菜单和纯CSS下拉菜单

一.CSS+JS下拉菜单 原理:一级菜单的li中包含二级菜单ul.在鼠标没有移上去时,二级菜单的ul是display:none的状态,鼠标一移上去变成display:block.改变这个display属性值是通过JS来实现.鼠标hover时,把整个二级菜单的ul给display出来,用到的事件onmouseonver.鼠标移出又把整个二级菜单的ul 给隐藏掉. nav-js.html文件 <!DOCTYPE html > <html> <head> <meta c

JS三级折叠菜单特效 自动收缩其它级

真的很不错!很实用,在IE6.IE7.IE8.FF.chrome等浏览器都正常运行,去掉CSS中 #menu ul中 {height:100px; overflow:auto;} 即可高度自适应 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html x

Js无刷新添加新层,拖动DIV层可互换位置的JavaScript实现

<html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>Js无刷新添加新层</title><style>body {margin:0px;padding:0px;font-size:12px;text-align:center;}body > div {text-ali

js下拉菜单默认值为当前年份,下拉菜单的选项为当前年份往前推5年

1:在jsp或者HTML页面中新建一个下拉框 年度:<select id="cx_nd" name="cx_nd" style="width: 60px;"></select> 年 2:调用下面方法即可 window.onload = function(){ var sel = document.getElementById("cx_nd"); var date = new Date(); for(va

JS 下拉菜单

HTML 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>下拉菜单</title> 6 <link rel="stylesheet" href="css/style.css"> 7 <script src="https://ajax.googleapis.c

批处理/命令行合并js,递归合并子目录js文件

for /r %%i in (*.js) do type "%%i">>xxx-all.js java -jar yuicompressor.jar --type js --charset utf-8 -o xxx-min.js xxx-all.js 第一句意思是合并当前目录和子目录的全部js文件,输出为xxx-all.js 第二句结合yuicompressor,把js最小化 批处理/命令行合并js,递归合并子目录js文件