Fork me on GitHub

fsLayuiPlugin菜单导航栏使用说明(二)

介绍

前面已经介绍了菜单导航栏使用说明(一),此种模式主要对于静态的html页面使用;如果需要动态的菜单功能,那么需要看此文档,本文介绍动态菜单配置使用。

演示环境地址:http://fslayuiplugin.fallsea.com

使用说明

动态菜单支持两种模式,1:加载前端缓存数据,2:加载后台接口动态数据

菜单配置

菜单信息在fsMenu.js文件中配置,文件路径plugins/frame/js/fsMenu.js,只需要修改文件中的menuConfig信息,根据实际情况修改。

接口数据必须配置list数组

1
2
3
4
5
6
7
8
9
10
11
12
13
var menuConfig = {
dataType : "local" , //获取数据方式,local本地获取,server 服务端获取
loadUrl : "", //加载数据地址
rootMenuId : "0", //根目录菜单id
defaultSelectTopMenuId : "1", //默认选中头部菜单id
defaultSelectLeftMenuId : "111", //默认选中左边菜单id
menuIdField : "menuId", //菜单id
menuNameField : "menuName", //菜单名称
menuIconField : "menuIcon" , //菜单图标,图标必须用css
menuHrefField : "menuHref" , //菜单链接
parentMenuIdField : "parentMenuId" ,//父菜单id
data : [] //本地数据
};

配置说明

属性必输名称描述
dataType获取数据方式local本地获取,server 服务端获取;本地获取需要配置data,服务端获取需要配置loadUrl
loadUrl请求数据地址服务端获取请求数据地址
rootMenuId根目录菜单id值菜单根id,通过此id寻找一级菜单
defaultSelectTopMenuId默认选中的一级菜单一级菜单即是头部菜单
defaultSelectLeftMenuId默认选中的左边菜单左边菜单
menuIdField菜单id字段信息
menuNameField菜单名称字段
menuIconField菜单图标字段
menuHrefField菜单打开地址字段
parentMenuIdField父菜单id字段
data菜单集合本地菜单集合,必须是list

菜单图标配置说明

菜单图标支持多种模式配置:

  1. 使用font-awesome图标库

    只需要进入官网font-awesome,选择好对应的图标,然后在菜单图标字典中配置即可。

    例如:复制的按钮图标配置fa-files-o

  2. 使用layui官方的图标库

    进入官网layui,选择图标代码即可。

    例如:首页的按钮图标配置

  3. 自定义图标库

    如果需要自定义图标,那么只需要配置原生的图标配置。

    例如:<i class="layui-icon">&#xe60c;</i>

本地菜单配置demo

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
[
{"menuId":"1","menuName":"控制台","menuIcon":"fa-cog","menuHref":"","parentMenuId":"0"},
{"menuId":"2","menuName":"测试","menuIcon":"","menuHref":"","parentMenuId":"0"},
{"menuId":"11","menuName":"案例","menuIcon":"fa-table","menuHref":"","parentMenuId":"1"},
{"menuId":"12","menuName":"其他页面","menuIcon":"","menuHref":"","parentMenuId":"1"},
{"menuId":"111","menuName":"首页","menuIcon":"&#xe68e;","menuHref":"views/home/index.html","parentMenuId":"11"},
{"menuId":"datagrid","menuName":"数据表格","menuIcon":"fa-list","menuHref":"views/datagrid/index.html","parentMenuId":"11"},
{"menuId":"datagrid2","menuName":"数据表格2","menuIcon":"fa-list","menuHref":"views/datagrid2/index.html","parentMenuId":"11"},
{"menuId":"treeDatagrid","menuName":"数+表格","menuIcon":"fa-list","menuHref":"views/treeDatagrid/index.html","parentMenuId":"11"},
{"menuId":"multiDatagrid","menuName":"多数据表格","menuIcon":"fa-list","menuHref":"views/multiDatagrid/index.html","parentMenuId":"11"},
{"menuId":"tabDatagrid","menuName":"tab数据表格","menuIcon":"fa-list","menuHref":"views/tabDatagrid/index.html","parentMenuId":"11"},
{"menuId":"complexDatagrid","menuName":"复杂数据表格","menuIcon":"fa-list","menuHref":"views/complexDatagrid/index.html","parentMenuId":"11"},
{"menuId":"linkageDatagrid","menuName":"联动数据表格","menuIcon":"fa-list","menuHref":"views/linkageDatagrid/index.html","parentMenuId":"11"},
{"menuId":"linkageDatagrid2","menuName":"联动数据表格(复杂)","menuIcon":"fa-list","menuHref":"views/linkageDatagrid2/index.html","parentMenuId":"11"},
{"menuId":"staticDatagrid","menuName":"表格数据提交","menuIcon":"fa-list","menuHref":"views/staticDatagrid/index.html","parentMenuId":"11"},
{"menuId":"121","menuName":"404","menuIcon":"<i class=\"layui-icon\">&#xe61c;</i>","menuHref":"404.html","parentMenuId":"12"},
{"menuId":"21","menuName":"基本元素","menuIcon":"","menuHref":"","parentMenuId":"2"},
{"menuId":"22","menuName":"徽章","menuIcon":"","menuHref":"http://www.layui.com/demo/badge.html","parentMenuId":"2"},
{"menuId":"23","menuName":"数据表格","menuIcon":"","menuHref":"http://www.layui.com/demo/table.html","parentMenuId":"2"},
{"menuId":"211","menuName":"按钮","menuIcon":"","menuHref":"http://www.layui.com/demo/button.html","parentMenuId":"21"},
{"menuId":"212","menuName":"表单","menuIcon":"","menuHref":"http://www.layui.com/demo/form.html","parentMenuId":"21"},
{"menuId":"213","menuName":"选项卡","menuIcon":"","menuHref":"http://www.layui.com/demo/tab.html","parentMenuId":"21"}
]
FallSea wechat
欢迎您扫一扫上面的微信公众号,订阅我的博客!
坚持原创技术分享,您的支持将鼓励我继续创作!