自动生成导航栏和菜单的解决方案

自动生成导航栏和菜单的解决方案

 

系统是常见的左右结构的系统,左边是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循环遍历来判断