自动生成导航栏和菜单的解决方案
系统是常见的左右结构的系统,左边是bootstrap的菜单,右边是内容页,内容页的顶部是导航,以前的做法是直接和菜单导航栏在页面里写死,但是后期改起来很不方便,后来经过努力终于完成自动生成菜单和导航栏的功能
一:自动生成菜单解决方案
后台建menu表
字段为id, menuName(菜单名), pid(父级id), ico(图标样式或img), url(用于页面跳转), order(排序字段)
这样可以通过权限表关联菜单表来实现控制,返回到前端页面,返回的是json格式
如var menuList = [{
"ico": "",
"id": 36,
"name": "采购任务",
"order": 0,
"pId": 1,
"url": ""
}, {
"ico": "",
"id": 37,
"name": "待采购列表",
"order": 0,
"pId": 36,
"url": "purchase/purchaseInit.do"
}, {
"ico": "",
"id": 38,
"name": "零星采购列表",
"order": 0,
"pId": 36,
"url": "purchase/getLXPurchaseH.do"
},]
前端通过layer模板渲染左侧的导航
二:面包屑导航栏的自动生成
导航栏的数据=点击的左侧菜单+通过按钮跳转的页面
要解决的问题:
1. 浏览器随意向前向后保证生成导航栏的正确性
2. 用户的操作是随机的肯能点击左侧菜单,浏览器刷新向前向后,或者点击导航栏的其中一项,或者是点击页面的超链接或按钮进入,如何保证导航栏生成数据的正确性
解决方案
Localstorage. navlist存储访问路径列表,注意列表navlist中的元素也是一个列表,其中存储的是不重复的访问路径,就像树的顶点到叶子节点的路径一样,其中左侧的菜单导航有pid和id
如果是从按钮导航点进去的话只有name和url
[
[{
"name": "采购任务",
"url": "",
"pId": 1,
"id": 36
}, {
"name": "待采购列表",
"url":"http://127.0.0.1:8180/erp/purchase/purchaseInit.do",
"pId": 36,
"id": 37
}, {
"name": "按物料查看",
"url":"http://127.0.0.1:8180/erp/purchase/purchaseByGoodsInit.do?state=2"
}],
[{
"name": "采购任务",
"url": "",
"pId": 1,
"id": 36
}, {
"name": "待采购列表",
"url": "http://127.0.0.1:8180/erp/purchase/purchaseInit.do",
"pId": 36,
"id": 37
}, {
"name": "按供应商查看",
"url":"http://127.0.0.1:8180/erp/purchase/purchaseBySupplierInit.do"
}, {
"name": " 查看详情",
"url": "http://127.0.0.1:8180/erp/purchase/supplierDInit.do"
}],
]
具体方法:
根据当前url判断是否在navlist中存在,如果存在则获取其中的数据,如果不存在则根据document.referrer(上一次的访问地址)判断是否需要新建分支或者直接追加到某个分支上,
三:有待优化的地方:
1. 数据可以在压缩下,比如把域名去掉,或者最终的数据对象是存储着name,url, pId,id,换成只存储id
2. 加快url的搜索速度,现在是两个for循环遍历来判断