关于多级菜单的处理

周大胖子 · 发表于 2018-10-14 23:46:48

先掰扯一下
什么是多级菜单：就是主菜单-》子菜单-》孙子菜单-》曾孙子菜单依次不断往后延伸；
但是：所有数据表的数据结构却都是一样的

var menusarr = [
{'id':'1','gid':'0','title':'客户管理','statue':'0','url':'/abc/a'}
,{'id':'2','gid':'1','title':'客户列表','statue':'0','url':'/abc/a'}
,{'id':'3','gid':'1','title':'客户状态','statue':'0','url':'/abc/a'}
,{'id':'4','gid':'3','title':'睡着的','statue':'0','url':'/abc/a'}
,{'id':'5','gid':'3','title':'发财的','statue':'0','url':'/abc/a'}
,{'id':'6','gid':'4','title':'眯着眼睡的','statue':'0','url':'/abc/a'}
,{'id':'7','gid':'0','title':'员工管理','statue':'0','url':'/abc/a'}
,{'id':'8','gid':'0','title':'等级管理','statue':'0','url':'/abc/a'}
,{'id':'9','gid':'0','title':'客户管理','statue':'0','url':'/abc/a'}
,{'id':'10','gid':'7','title':'准备滚蛋的','statue':'0','url':'/abc/a'}
,{'id':'11','gid':'10','title':'带着铺盖卷滚蛋的','statue':'0','url':'/abc/a'}
,{'id':'12','gid':'0','title':'系统设置','statue':'0','url':'/abc/a'}
]

复制代码

如上，如果有父级菜单那么 gid = 父级的id ；如果没有就是顶级菜单。

先贴一段我原本写的 nodeJS 菜单生成方法注意在这一段中，菜单有一个等级的字段不向上面这段数据这么任性；

// 获取列表
router.get('/', async (ctx, next) => {
console.log('进来了menu 目标获取目录列表');
//设置基础值 data就是列表项传输出去的值也是这个
// 获取所有菜单的值数据表
let dk = await DB.find('menuS',{}) ;
// 排序
dk.sort(compareAsc("paixu"));
// 在这个位置生成菜单JSON
let menuArry = []
// 循环生成一级表单
for(var k=0; k<dk.length; k++){
// 判断
if(dk[k].dengji == 1){
// 如果没有父级创建一级菜单
menuArry.push(dk[k])
}
}
// 先把2存出来,再把3添加到2中，最后把2 添加到1 中
var dj2Arry = []
// 循环生成二级表单
for(var m=0; m<dk.length; m++){
// 如果是二级菜单
if(dk[m].dengji ==2 ){
// 存出二级菜单，然后循环该数组将三级菜单存入
dj2Arry.push(dk[m])
}
}
// 循环生成三级表单并存入二级菜单中
for(var j=0; j<dk.length; j++){
// 如果是三级菜单
if(dk[j].dengji ==3){
// 向父级数组List中添加
for(var mm=0; mm<dj2Arry.length; mm++){
// 判断，如果寻找id值相等的父级
if(dj2Arry[mm]._id == dk[j].parent){
// 填充相应的三级列表到二级数组中
dj2Arry[mm].list.push({"name": dk[j].jump,"title":dk[j].title})
}
}
}
}
//最后一步把2存到1中
for(var m=0; m<dj2Arry.length; m++){
// 向父级数组List中添加
for(var mm=0; mm<menuArry.length; mm++){
// 判断，如果寻找id值相等的父级
if(menuArry[mm]._id == dj2Arry[m].parent && dj2Arry[m].list.length>0){
menuArry[mm].list.push({"name" : dj2Arry[m].jump , "title" : dj2Arry[m].title ,"list" : dj2Arry[m].list})
}
if(menuArry[mm]._id == dj2Arry[m].parent && dj2Arry[m].list.length == 0){
menuArry[mm].list.push({"name" : dj2Arry[m].name , "title" : dj2Arry[m].title ,"jump" : dj2Arry[m].jump})
}
}
}
let menuL = { "code": "0" ,"msg": "这是msg的值" ,"data": menuArry} ;
ctx.body = menuL
})

复制代码

然后我要开始处理一开始的这段数据拉，因为这段数据是无限极下拉菜单【待完善】

周大胖子 · 发表于 2018-10-14 23:50:14

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title>aaa</title>
</head>
<body>
<h1>测试一个方法</h1>
<script>
//多级菜单的原理
var a= 15 ;
function mm( num ){
var arr=[];
ab(num)
function ab(num){
num = num-1;
if(arr.length<4){
arr.push(num)
ab(num)
}else{
console.log(arr)
}
}
}
mm(a); //该方法不是异步
console.log('aaaa')
</script>
<script>
// 写一个多级嵌套菜单处理方法处理结果为一个嵌套的JSON数据可无限极延伸
// 已知数据格式
var menusarr = [
{'id':'1','gid':'0','title':'客户管理','statue':'0','url':'/abc/a'}
,{'id':'2','gid':'1','title':'客户列表','statue':'0','url':'/abc/a'}
,{'id':'3','gid':'1','title':'客户状态','statue':'0','url':'/abc/a'}
,{'id':'4','gid':'3','title':'睡着的','statue':'0','url':'/abc/a'}
,{'id':'5','gid':'3','title':'发财的','statue':'0','url':'/abc/a'}
,{'id':'6','gid':'4','title':'眯着眼睡的','statue':'0','url':'/abc/a'}
,{'id':'7','gid':'0','title':'员工管理','statue':'0','url':'/abc/a'}
,{'id':'8','gid':'0','title':'等级管理','statue':'0','url':'/abc/a'}
,{'id':'9','gid':'0','title':'客户管理','statue':'0','url':'/abc/a'}
,{'id':'10','gid':'7','title':'准备滚蛋的','statue':'0','url':'/abc/a'}
,{'id':'11','gid':'10','title':'带着铺盖卷滚蛋的','statue':'0','url':'/abc/a'}
,{'id':'12','gid':'0','title':'系统设置','statue':'0','url':'/abc/a'}
]
var menusdata=[] //最后生成的菜单数组
function menusjson(menusarr)
{
var arr=[];
dojson(menusarr)
// 先开始循环提出一级菜单
for(var i=0; i<menusarr.length; i++){
if(!menusarr[i].gid){
menusdata.push(menusarr[i])
}else{
arr.push(menusarr[i])
}
}
// 用来处理循环的数组，不断的判断 Arr的长度。看是否有值没有找到父级直到所有值都找到了父级
function dojson(menusdata,arr){
if(arr.length>0){
// 循环
for(var k=0; k<arr.length; k++)
{
for(var j=0;j<menusdata.length; j++){
if(arr[k].gid == menusdata[j].id){
// 判断是否有list属性没有就给他加list属性对应的值是 arr
if(menusdata[j].list){
menusdata[j].list = [arr[k]]; //增加list 属性
}else{
menusdata[j].list.push(arr[k]) //如果有就往里添加
}
}
}
}
}else{
// 输出结果
}
}
}
</script>
</body>
</html>

复制代码