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

介绍

前面已经介绍了菜单导航栏使用说明(一)，此种模式主要对于静态的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

菜单图标配置说明

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

1. 使用font-awesome图标库

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

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

2. 使用layui官方的图标库

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

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

3. 自定义图标库

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

例如：<i class="layui-icon">&#xe60c;</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\">&#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"}
]

本文首发于我的博客：ITCTO技术博客