layui ajax实现菜单管理功能,无限菜单--基于jquery+layui的异步无限菜单导航及后台界面...

一个偷懒程序猿的自白

偷懒是人的本性，自然的想要的东西都依赖百度，无奈找了老半天都没能找到心怡的无限菜单，索性自己动手写写。并不是专业的前端人员，代码有瑕疵还望多多包涵，欢迎指正。

话不多说，直奔主题。

一、先看效果

无限菜单导航.png

二、HTML代码实现

layui

layui 后台布局

• 控制台
• 商品管理
• 用户

• 其它系统

  邮件管理

  消息管理

  授权管理

• 

  贤心

  基本资料

  安全设置

• 退了

© layui.com - 底部固定区域

// 导航菜单的间隔像素

var menuCell = 5;

layui.use('element', function(){

var element = layui.element;

var $ = layui.jquery;

data= '[{"name":"主页","url":"www.sys.com","childMenus":null},{"name":"系统设置","url":"www.sys.com","childMenus":[{"name":"权限模块","url":"www.sys.com","childMenus":null}]},{"name":"业务系统","url":"www.manager.com","childMenus":[{"name":"销售系统","url":"www.child01.com","childMenus":[{"name":"订单系统","url":"www.order.com","childMenus":[{"name":"未完成订单","url":"www.undo.com","childMenus":[{"name":"服装部订单","url":"www.clothes.com","childMenus":[{"name":"成人部分","url":"www.clothes.com","childMenus":null},{"name":"儿童部分","url":"www.clothes.com","childMenus":null}]},{"name":"玩具部订单","url":"www.clothes.com","childMenus":[{"name":"成人部分","url":"www.clothes.com","childMenus":null},{"name":"儿童部分","url":"www.clothes.com","childMenus":null}]}]}]},{"name":"结算系统","url":"www.order.com","childMenus":null}]},{"name":"公关系统","url":"www.child02.com","childMenus":null}]}]';

console.log("data: "+data);

data = JSON.parse(data);

var liStr= "";

// 遍历生成主菜单

for( var i = 0; i

//console.log("--> "+JSON.stringify(data[i]));

// 判断是否存在子菜单

if(data[i].childMenus!=null&&data[i].childMenus.length>0){

console.log("--> "+JSON.stringify(data[i].childMenus));

liStr+="

 "+data[i].name+"\n"+

"

// 遍历获取子菜单

for( var k = 0; k

liStr+=getChildMenu(data[i].childMenus[k],0);

}

liStr+="

";

}else{

liStr+="

 "+data[i].name+"";

}

};

console.log(">>>> "+liStr);

$("#navBarId").html("

• \n" +liStr+"

");

element.init();

});

// 递归生成子菜单

function getChildMenu(subMenu,num) {

console.log("num: "+num);

num++;

var subStr = "";

if(subMenu.childMenus!=null&&subMenu.childMenus.length>0){

subStr+="

•  "+subMenu.name+"" +

  "

  for( var j = 0; j

  subStr+=getChildMenu(subMenu.childMenus[j],num);

  }

  subStr+="

";

}else{

subStr+="

 "+subMenu.name+"";

}

return subStr;

}

layui.use('table', function(){

var table = layui.table;

table.render({

elem: '#test'

,url:'common/userList'

,cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增

,cols: [[

{field:'id', width:80, title: 'id', sort: true}

,{field:'lngCm', width:80, title: 'lngCm'}

,{field:'username', width:80, title: 'username', sort: true}

]]

,request:{

pageName: 'curr' //页码的参数名称，默认：page

,limitName: 'nums' //每页数据量的参数名，默认：limit

}

//用于对返回的数据格式的自定义，如：

,response: {

statusName: 'succ' //数据状态的字段名称，默认：code

,statusCode: 0 //成功的状态码，默认：0

,msgName: 'msg' //状态信息的字段名称，默认：msg

,countName: 'totalSize' //数据总数的字段名称，默认：count

,dataName: 'list' //数据列表的字段名称，默认：data

}

});

});

三、后台json串

[

{

"name": "系统设置",

"url": "www.sys.com",

"childMenus": [

{

"name": "权限模块",

"url": "www.sys.com",

"childMenus": null

}

]

},

{

"name": "业务系统",

"url": "www.manager.com",

"childMenus": [

{

"name": "销售系统",

"url": "www.child01.com",

"childMenus": [

{

"name": "订单系统",

"url": "www.order.com",

"childMenus": [

{

"name": "未完成订单",

"url": "www.undo.com",

"childMenus": [

{

"name": "服装部订单",

"url": "www.clothes.com",

"childMenus": [

{

"name": "成人部分",

"url": "www.clothes.com",

"childMenus": null

},

{

"name": "儿童部分",

"url": "www.clothes.com",

"childMenus": null

}

]

},

{

"name": "玩具部订单",

"url": "www.clothes.com",

"childMenus": [

{

"name": "成人部分",

"url": "www.clothes.com",

"childMenus": null

},

{

"name": "儿童部分",

"url": "www.clothes.com",

"childMenus": null

}

]

}

]

}

]

},

{

"name": "结算系统",

"url": "www.order.com",

"childMenus": null

}

]

},

{

"name": "公关系统",

"url": "www.child02.com",

"childMenus": null

}

]

}

]