javascript递归算法实现无限级树形菜单
2021/03/07 标签:
javascript无线级菜单
菜单栏目常见格式:
<?php $address = array( array('id'=>1 , 'address'=>'安徽' , 'parent_id' => 0), array('id'=>2 , 'address'=>'江苏' , 'parent_id' => 0), array('id'=>3 , 'address'=>'合肥' , 'parent_id' => 1), array('id'=>4 , 'address'=>'庐阳区' , 'parent_id' => 3), array('id'=>5 , 'address'=>'大杨镇' , 'parent_id' => 4), array('id'=>6 , 'address'=>'南京' , 'parent_id' => 2), array('id'=>7 , 'address'=>'玄武区' , 'parent_id' => 6), array('id'=>8 , 'address'=>'梅园新村街道', 'parent_id' => 7), array('id'=>9 , 'address'=>'上海' , 'parent_id' => 0), array('id'=>10 , 'address'=>'黄浦区' , 'parent_id' => 9), array('id'=>11 , 'address'=>'外滩' , 'parent_id' => 10) array('id'=>12 , 'address'=>'安庆' , 'parent_id' => 1) ); ?>
转化成json对象就是这个这样子
var data = [ {id: 1, address: "安徽", parent_id: 0}, {id: 2, address: "江苏", parent_id: 0}, {id: 3, address: "合肥", parent_id: 1}, {id: 4, address: "庐阳区", parent_id: 3}, {id: 5, address: "大杨镇", parent_id: 4}, {id: 6, address: "南京", parent_id: 2}, {id: 7, address: "玄武区", parent_id: 6}, {id: 8, address: "梅园新村街道", parent_id: 7}, {id: 9, address: "上海", parent_id: 0}, {id: 10, address: "黄浦区", parent_id: 9}, {id: 11, address: "外滩", parent_id: 10}, {id: 12, address: "安庆", parent_id: 1} ];
根据最后一个找到整个家族(家谱树)
//根据最后一个找到整个家族 function familyTree(arr, pid) { var temp = []; var forFn = function(arr, pid){ for (var i = 0; i < arr.length; i++) { var item = arr[i]; if (item.id == pid) { temp.push(item); forFn(arr,item.parent_id); } } }; forFn(arr, pid); return temp; } //console.log(familyTree(data,10));
从顶级往下找到所有的子子孙孙(子孙树)
//子孙树,从顶级往下找到是有的子子孙孙 function sonsTree(arr,id){ var temp = [],lev=0; var forFn = function(arr, id,lev){ for (var i = 0; i < arr.length; i++) { var item = arr[i]; if (item.parent_id==id) { item.lev=lev; temp.push(item); forFn(arr,item.id,lev+1); } } }; forFn(arr, id,lev); return temp; } //console.log(sonsTree(data,0));
利用子孙树生成一个树形dom结构(实例)
//利用 子孙树 生成dom结构 var tree = sonsTree(data,0); var htmlUL = '<ul>'; for(var i=0;i<tree.length;i++){ if(i==tree.length-1){//最后一个元素 htmlUL += '<li>' + tree[i].address + '</li>' + new Array(tree[i].lev+1).join('</ul></li>'); }else{ if(tree[i+1].lev > tree[i].lev){ htmlUL += '<li>' + tree[i].address +'<ul>'; } else if( tree[i+1].lev == tree[i].lev){ htmlUL += '<li>' + tree[i].address + '</li>'; } else if ( tree[i+1].lev < tree[i].lev){ htmlUL += '<li>' + tree[i].address + '</li>' + new Array(tree[i].lev - tree[i+1].lev +1).join('</ul></li>'); } } } htmlUL += '</ul>'; console.log(htmlUL) treeUL.innerHTML = htmlUL; var htmlDL = '<dl>'; for(var i = 0; i < tree.length; i++){ if(i == tree.length-1){ htmlDL += '<dd>' + tree[i].address + '</dd>' + new Array(tree[i].lev + 1).join('</dl></dd>'); }else{ if(tree[i+1].lev > tree[i].lev){ htmlDL += '<dd><dl><dt>' + tree[i].address + '<dt>'; }else if(tree[i+1].lev == tree[i].lev){ htmlDL += '<dd>' + tree[i].address + '</dd>'; }else if(tree[i+1].lev <tree[i].lev){ htmlDL += '<dd>' + tree[i].address + '</dd>' + new Array(tree[i].lev - tree[i+1].lev + 1).join('</dl></dd>'); } } } htmlDL+='</dl>'; console.log(htmlDL); treeDL.innerHTML = htmlDL;
部分选自:懒人建站
下一篇:
nginx配置thinkphp3.1.3
静水缘首页
刘丕水+宋静静于2007年9月相识于山东理 工大学,毕业后2011年相恋,共甘苦,历 时四年,终于在11月23号拿到了红本本, 组建了自己的小家庭......文章分类
最新文章
- nodejs私钥加密公钥解密的一个例子
- uniapp和微信小程序判断程序运行在开发或者测试或者线上版本的方法分别是什么
- electron使用electron-builder打包后模块包含exe文件执行失败
- Compile is disallowed on the main thread, if the buffer size is larger than 4KB
- better-sqlite3简介及常用操作
- nodejs 操作数据库的库
- nodejs使用http-proxy库实现多个域名代理和同时代理websocket的例子,代理包含https和http两种协议
- iis配置反向代理
- javascript伪多线程代码
- ip所在地址段判断