废话不多讲,先上一张效果图共同学们参考:
当然工作平台一下也有相应的二级菜单,之前使用递归写无限级菜单,因为遇到种种问题搁置了,下一篇小编继续奉上
现在展示数据结构:
var json=[{
"m_id": 1,
"m_name": "工作平台",
"m_code": "001",
"m_childrenId": 0,
"m_icon": "fa fa-television fa-2x",
"m_url": "ww.baidu.com",
"m_time": 1526349702000,
"m_text": "",
"m_sort": 0,
"m_level": 0,
"m_statu": 0,
"menus": [{
"m_id": 6,
"m_name": "工作平台一",
"m_code": "006",
"m_childrenId": 1,
"m_icon": "fa fa-television fa-2x",
"m_url": "ww.baidu.com",
"m_time": 1526349703000,
"m_text": "",
"m_sort": 0,
"m_level": 0,
"m_statu": 0,
"menus": [{
"m_id": 11,
"m_name": "工作平台二",
"m_code": "011",
"m_childrenId": 6,
"m_icon": "fa fa-television fa-2x",
"m_url": "ww.baidu.com",
"m_time": 1526349704000,
"m_text": "",
"m_sort": 0,
"m_level": 0,
"m_statu": 0,
"menus": []
}]
}]
}, {
"m_id": 2,
"m_name": "工具",
"m_code": "002",
"m_childrenId": 0,
"m_icon": "fa fa-cubes fa-2x",
"m_url": "ww.baidu.com",
"m_time": 1526349702000,
"m_text": "",
"m_sort": 0,
"m_level": 0,
"m_statu": 0,
"menus": [{
"m_id": 7,
"m_name": "工具一",
"m_code": "007",
"m_childrenId": 2,
"m_icon": "fa fa-cubes fa-2x",
"m_url": "ww.baidu.com",
"m_time": 1526349703000,
"m_text": "",
"m_sort": 0,
"m_level": 0,
"m_statu": 0,
"menus": [{
"m_id": 12,
"m_name": "工具二",
"m_code": "012",
"m_childrenId": 7,
"m_icon": "fa fa-cubes fa-2x",
"m_url": "ww.baidu.com",
"m_time": 1526349704000,
"m_text": "",
"m_sort": 0,
"m_level": 0,
"m_statu": 0,
"menus": []
}, {
"m_id": 13,
"m_name": "数据统计二",
"m_code": "013",
"m_childrenId": 7,
"m_icon": "fa fa-bar-chart fa-2x",
"m_url": "ww.baidu.com",
"m_time": 1526349704000,
"m_text": "",
"m_sort": 0,
"m_level": 0,
"m_statu": 0,
"menus": []
}]
}]
}, {
"m_id": 3,
"m_name": "数据统计",
"m_code": "003",
"m_childrenId": 0,
"m_icon": "fa fa-bar-chart fa-2x",
"m_url": "ww.baidu.com",
"m_time": 1526349702000,
"m_text": "",
"m_sort": 0,
"m_level": 0,
"m_statu": 0,
"menus": [{
"m_id": 8,
"m_name": "数据统计一",
"m_code": "008",
"m_childrenId": 3,
"m_icon": "fa fa-bar-chart fa-2x",
"m_url": "ww.baidu.com",
"m_time": 1526349703000,
"m_text": "",
"m_sort": 0,
"m_level": 0,
"m_statu": 0,
"menus": []
}]
}, {
"m_id": 4,
"m_name": "系统管理",
"m_code": "004",
"m_childrenId": 0,
"m_icon": "fa fa-cog fa-2x",
"m_url": "ww.baidu.com",
"m_time": 1526349703000,
"m_text": "",
"m_sort": 0,
"m_level": 0,
"m_statu": 0,
"menus": [{
"m_id": 9,
"m_name": "系统管理一",
"m_code": "009",
"m_childrenId": 4,
"m_icon": "fa fa-cog fa-2x",
"m_url": "ww.baidu.com",
"m_time": 1526349703000,
"m_text": "",
"m_sort": 0,
"m_level": 0,
"m_statu": 0,
"menus": [{
"m_id": 14,
"m_name": "系统管理二",
"m_code": "014",
"m_childrenId": 9,
"m_icon": "fa fa-cog fa-2x",
"m_url": "ww.baidu.com",
"m_time": 1526349704000,
"m_text": "",
"m_sort": 0,
"m_level": 0,
"m_statu": 0,
"menus": []
}]
}]
}, {
"m_id": 5,
"m_name": "更多",
"m_code": "005",
"m_childrenId": 0,
"m_icon": "fa fa-list fa-2x",
"m_url": "ww.baidu.com",
"m_time": 1526349703000,
"m_text": "",
"m_sort": 0,
"m_level": 0,
"m_statu": 0,
"menus": [{
"m_id": 10,
"m_name": "更多一",
"m_code": "010",
"m_childrenId": 5,
"m_icon": "fa ffa-list fa-2x",
"m_url": "ww.baidu.com",
"m_time": 1526349703000,
"m_text": "",
"m_sort": 0,
"m_level": 0,
"m_statu": 0,
"menus": [{
"m_id": 15,
"m_name": "更多二",
"m_code": "015",
"m_childrenId": 10,
"m_icon": "fa ffa-list fa-2x",
"m_url": "ww.baidu.com",
"m_time": 1526349704000,
"m_text": "",
"m_sort": 0,
"m_level": 0,
"m_statu": 0,
"menus": []
}]
}]
}]
这是一个标准的树形结构,再看一下前台的页面easyui官方demo布局样式:
<div region="west" data-options="iconCls:'icon-world '" split="true" title="导航菜单" style="width:220px;">
<div id="west" class="easyui-accordion">
</div>
</div>
到最后一步遍历数据拼接菜单,上面已经提到了暂时没有递归,这种写法会有局限性不过可以实现我们想要的效果:
function showTree(menu,m_id) {
if(menu.menus.length > 0){
$.each(menu.menus,function(i,n){
var menulist = "";
menulist += "<ul>";
$.each(n.menus, function(j, o) {
menulist += "<li><div><a target='mainFrame'>" + o.m_name + "</a></div></li> ";
})
menulist += "</ul>";
$("#west").accordion("add", {
title: n.m_name,
content: menulist,
select:true
})
})
}
}
在这里解释一下showTree()里的两个参数:menu跟m_id是最顶级的菜单并不是 平台一,工具一,(平台一,工具一)附属于工作平台下的二级,三级菜单
不明白继续看:menu 跟 m_id 是第一个要展示的顶级菜单的第一个数组的id,也就是说menu[0],menu[0].m_id;再不明白加留言加我
到这里就全部结束了;