介绍
前面已经介绍了菜单导航栏使用说明(一)，此种模式主要对于静态的html页面使用；如果需要动态的菜单功能，那么需要看此文档，本文介绍动态菜单配置使用。
演示环境地址：http://fslayui.itcto.cn
使用说明
动态菜单支持两种模式，1：加载前端缓存数据，2：加载后台接口动态数据
菜单配置
菜单信息在fsMenu.js文件中配置，文件路径plugins/frame/js/fsMenu.js,只需要修改文件中的menuConfig信息，根据实际情况修改。
接口数据必须配置list数组
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
菜单图标配置说明
菜单图标支持多种模式配置：
- 使用
font-awesome图标库
只需要进入官网font-awesome，选择好对应的图标，然后在菜单图标字典中配置即可。
例如：复制的按钮图标配置fa-files-o
- 使用
layui官方的图标库
进入官网layui，选择图标代码即可。
例如：首页的按钮图标配置
- 自定义图标库
如果需要自定义图标，那么只需要配置原生的图标配置。
例如：<i class="layui-icon"></i>
本地菜单配置demo
[
{"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":"","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\"></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"}
]
本文首发于我的博客：ITCTO技术博客
