Bootstrap Metronic完全响应式管理模板之菜单栏学习笔记

站长资源 2024/11/29 佚名

8 1538 8

DDR爱好者之家 Design By 杰米

继续上一篇，针对Bootstrap Metronic菜单栏整理的笔记分享给大家，供大家参考，具体内容如下

1.简介
1) .环境配置
2) .提取页面
3）.动态生成菜单（无限级别树）

2.系统环境配置
项目需要程序数据支撑，这里选择MVC5.0+EF6.0[SQLSERVER]（不对MVC架构和SQLServer做出解读）
运行环境：VS2013+MVC5.0+EF6.1+SQLServer2012
解决方案名称：AppSolution 项目名称：App.Web(UI层)与App.Models(数据访问层) -直接访问模式
提取theme下的所有文件到MVC的Content，提取admin的index.html到_Layout.cshtml来准备改造

3.创建数据库和表
数据库：AppDataBase
创建以下数据表，并创建AppDB.edmx

USE [AppDataBase]
GO

/****** Object: Table [dbo].[SysModule] Script Date: 2015/9/15 21:03:39 ******/
SET ANSI_NULLS ON
GO

SET QUOTED_IDENTIFIER ON
GO

SET ANSI_PADDING ON
GO

CREATE TABLE [dbo].[SysModule](
 [ID] [varchar](50) NOT NULL, --主键ID
 [Name] [varchar](50) NOT NULL, --菜单名称
 [ParentID] [varchar](50) NULL, --上级ID
 [Url] [varchar](200) NULL, --URL
 [Iconic] [varchar](200) NULL, --图标
 [Sort] [int] NULL, --排序
 [Enable] [bit] NOT NULL, --是否显示
 [CreateTime] [datetime] NULL, --创建时间
 [IsLast] [bit] NOT NULL --是否最后一项
 CONSTRAINT [PK_SysModule] PRIMARY KEY CLUSTERED 
(
 [Id] ASC
)WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON) ON [PRIMARY]
) ON [PRIMARY]

GO

SET ANSI_PADDING OFF
GO

ALTER TABLE [dbo].[SysModule] WITH NOCHECK ADD CONSTRAINT [FK_SysModule_SysModule] FOREIGN KEY([ParentID])
REFERENCES [dbo].[SysModule] ([Id])
GO

ALTER TABLE [dbo].[SysModule] NOCHECK CONSTRAINT [FK_SysModule_SysModule]
GO

人为造点数据

INSERT INTO [SysModule] ([ID],[Name],[ParentID],[Url],[Iconic],[Sort],[Enable],[CreateTime],[IsLast]) values ('0','root','root','Index','icon-settings',NULL,0,NULL,0)
INSERT INTO [SysModule] ([ID],[Name],[ParentID],[Url],[Iconic],[Sort],[Enable],[CreateTime],[IsLast]) values ('1','一级菜单01','0','Index','icon-settings',NULL,0,NULL,0)
INSERT INTO [SysModule] ([ID],[Name],[ParentID],[Url],[Iconic],[Sort],[Enable],[CreateTime],[IsLast]) values ('11','二级菜单01-01','1','Index','icon-settings',NULL,0,NULL,0)
INSERT INTO [SysModule] ([ID],[Name],[ParentID],[Url],[Iconic],[Sort],[Enable],[CreateTime],[IsLast]) values ('111','三级菜单01-01-01','11','Index','icon-link',NULL,0,NULL,1)
INSERT INTO [SysModule] ([ID],[Name],[ParentID],[Url],[Iconic],[Sort],[Enable],[CreateTime],[IsLast]) values ('112','三级菜单01-01-02','11','Index','icon-settings',NULL,0,NULL,1)
INSERT INTO [SysModule] ([ID],[Name],[ParentID],[Url],[Iconic],[Sort],[Enable],[CreateTime],[IsLast]) values ('12','二级菜单01-02','1','Index','icon-link',NULL,0,NULL,1)
INSERT INTO [SysModule] ([ID],[Name],[ParentID],[Url],[Iconic],[Sort],[Enable],[CreateTime],[IsLast]) values ('13','二级菜单01-03','1','Index','icon-link',NULL,0,NULL,1)
INSERT INTO [SysModule] ([ID],[Name],[ParentID],[Url],[Iconic],[Sort],[Enable],[CreateTime],[IsLast]) values ('2','一级菜单02','0','Index','icon-settings',NULL,0,NULL,0)
INSERT INTO [SysModule] ([ID],[Name],[ParentID],[Url],[Iconic],[Sort],[Enable],[CreateTime],[IsLast]) values ('21','二级菜单02-01','2','Index','icon-settings',NULL,0,NULL,0)
INSERT INTO [SysModule] ([ID],[Name],[ParentID],[Url],[Iconic],[Sort],[Enable],[CreateTime],[IsLast]) values ('211','三级菜单02-01-01','5','Index','icon-link',NULL,0,NULL,1)
INSERT INTO [SysModule] ([ID],[Name],[ParentID],[Url],[Iconic],[Sort],[Enable],[CreateTime],[IsLast]) values ('212','三级菜单02-01-02','5','Index','icon-link',NULL,0,NULL,1)
INSERT INTO [SysModule] ([ID],[Name],[ParentID],[Url],[Iconic],[Sort],[Enable],[CreateTime],[IsLast]) values ('22','二级菜单02-02','2','Index','icon-link',NULL,0,NULL,1)
INSERT INTO [SysModule] ([ID],[Name],[ParentID],[Url],[Iconic],[Sort],[Enable],[CreateTime],[IsLast]) values ('23','二级菜单02-03','2','Index','icon-link',NULL,0,NULL,1)
INSERT INTO [SysModule] ([ID],[Name],[ParentID],[Url],[Iconic],[Sort],[Enable],[CreateTime],[IsLast]) values ('3','一级菜单03','0','Index','icon-settings',NULL,0,NULL,0)
INSERT INTO [SysModule] ([ID],[Name],[ParentID],[Url],[Iconic],[Sort],[Enable],[CreateTime],[IsLast]) values ('31','二级菜单03-01','3','Index','icon-settings',NULL,0,NULL,0)
INSERT INTO [SysModule] ([ID],[Name],[ParentID],[Url],[Iconic],[Sort],[Enable],[CreateTime],[IsLast]) values ('311','三级菜单03-01-01','31','Index','icon-link',NULL,0,NULL,1)
INSERT INTO [SysModule] ([ID],[Name],[ParentID],[Url],[Iconic],[Sort],[Enable],[CreateTime],[IsLast]) values ('312','三级菜单03-01-02','31','Index','icon-link',NULL,0,NULL,1)
INSERT INTO [SysModule] ([ID],[Name],[ParentID],[Url],[Iconic],[Sort],[Enable],[CreateTime],[IsLast]) values ('32','二级菜单03-02','3','Index','icon-link',NULL,0,NULL,1)
INSERT INTO [SysModule] ([ID],[Name],[ParentID],[Url],[Iconic],[Sort],[Enable],[CreateTime],[IsLast]) values ('33','二级菜单03-03','3','Index','icon-link',NULL,0,NULL,1)
INSERT INTO [SysModule] ([ID],[Name],[ParentID],[Url],[Iconic],[Sort],[Enable],[CreateTime],[IsLast]) values ('4','一级菜单04','0','Index','icon-settings',NULL,0,NULL,0)
INSERT INTO [SysModule] ([ID],[Name],[ParentID],[Url],[Iconic],[Sort],[Enable],[CreateTime],[IsLast]) values ('41','二级菜单04-01','4','Index','icon-link',NULL,0,NULL,1)
INSERT INTO [SysModule] ([ID],[Name],[ParentID],[Url],[Iconic],[Sort],[Enable],[CreateTime],[IsLast]) values ('42','二级菜单04-02','4','Index','icon-link',NULL,0,NULL,1)

(22 行受影响)

4.提取页面重要布局
我们是后台系统所以我们保留top. left menu和foot3个部分
我已经提取好了，请复制

<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
 <meta charset="utf-8" />
 <title>Metronic | 版面展示</title>
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta content="width=device-width, initial-scale=1" name="viewport" />
 <meta content="" name="description" />
 <meta content="" name="author" />
 <link href="~/Content/assets/global/plugins/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
 <link href="~/Content/assets/global/plugins/simple-line-icons/simple-line-icons.min.css" rel="stylesheet" type="text/css" />
 <link href="~/Content/assets/global/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
 <link href="~/Content/assets/global/plugins/uniform/css/uniform.default.css" rel="stylesheet" type="text/css" />
 <link href="~/Content/assets/global/plugins/bootstrap-switch/css/bootstrap-switch.min.css" rel="stylesheet" type="text/css" />
 <!-- END GLOBAL MANDATORY STYLES -->
 <!-- BEGIN PAGE LEVEL PLUGIN STYLES -->
 <link href="~/Content/assets/global/plugins/bootstrap-daterangepicker/daterangepicker-bs3.css" rel="stylesheet" type="text/css" />
 <link href="~/Content/assets/global/plugins/fullcalendar/fullcalendar.min.css" rel="stylesheet" type="text/css" />
 <link href="~/Content/assets/global/plugins/jqvmap/jqvmap/jqvmap.css" rel="stylesheet" type="text/css" />
 <!-- END PAGE LEVEL PLUGIN STYLES -->
 <!-- BEGIN PAGE STYLES -->
 <link href="~/Content/assets/admin/pages/css/tasks.css" rel="stylesheet" type="text/css" />
 <!-- END PAGE STYLES -->
 <!-- BEGIN THEME STYLES -->
 <link href="~/Content/assets/global/css/components.css" id="style_components" rel="stylesheet" type="text/css" />
 <link href="~/Content/assets/global/css/plugins.css" rel="stylesheet" type="text/css" />
 <link href="~/Content/assets/admin/layout/css/layout.css" rel="stylesheet" type="text/css" />
 <link href="~/Content/assets/admin/layout/css/themes/darkblue.css" rel="stylesheet" type="text/css" id="style_color" />
 <link href="~/Content/assets/admin/layout/css/custom.css" rel="stylesheet" type="text/css" />
 <!-- END THEME STYLES -->
 <link rel="shortcut icon" href="favicon.ico" />
</head>
<body class="page-header-fixed page-quick-sidebar-over-content page-sidebar-closed-hide-logo page-container-bg-solid">
 <!-- BEGIN HEADER -->
 <div class="page-header navbar navbar-fixed-top">
 <!-- BEGIN HEADER INNER -->
 <div class="page-header-inner">
 <!-- BEGIN LOGO -->
 <div class="page-logo">
 <a href="index.html">
 <img src="/UploadFiles/2021-04-02/logo.png">



再次提取菜单代码 


<li class="start active open">
 <a href="javascript:;">
 <i class="icon-folder"></i>
 <span class="title">Multi Level Menu</span>
 <span class="arrow "></span>
 </a>
 <ul class="sub-menu">
 <li>
 <a href="javascript:;">
  <i class="icon-settings"></i> Item 1 <span class="arrow"></span>
 </a>
 <ul class="sub-menu">
  <li>
  <a href="javascript:;">
  <i class="icon-user"></i>
  Sample Link 1 <span class="arrow"></span>
  </a>
  <ul class="sub-menu">
  <li>
  <a href="#"><i class="icon-power"></i> Sample Link 1</a>
  </li>
  <li>
  <a href="#"><i class="icon-paper-plane"></i> Sample Link 1</a>
  </li>
  <li>
  <a href="#"><i class="icon-star"></i> Sample Link 1</a>
  </li>
  </ul>
  </li>
  <li>
  <a href="#"><i class="icon-camera"></i> Sample Link 1</a>
  </li>
  <li>
  <a href="#"><i class="icon-link"></i> Sample Link 2</a>
  </li>
  <li>
  <a href="#"><i class="icon-pointer"></i> Sample Link 3</a>
  </li>
 </ul>
 </li>
 <li>
 <a href="javascript:;">
  <i class="icon-globe"></i> Item 2 <span class="arrow"></span>
 </a>
 <ul class="sub-menu">
  <li>
  <a href="#"><i class="icon-tag"></i> Sample Link 1</a>
  </li>
  <li>
  <a href="#"><i class="icon-pencil"></i> Sample Link 1</a>
  </li>
  <li>
  <a href="#"><i class="icon-graph"></i> Sample Link 1</a>
  </li>
 </ul>
 </li>
 <li>
 <a href="#">
  <i class="icon-bar-chart"></i>
  Item 3
 </a>
 </li>
 </ul>
 </li>






大约在466行-529行 

分析上面html可以看出，li包含ul循环调用。所以我们用递归读取菜单 


5.拼接菜单栏

 创建Home视图Index.cshtml并应用_Layout.cshtml

 Bootstrap Metronic并菜单没有提供Ajax模式，我们只能读取数据拼接HTML

 过程：读取数据表数据递归调用 


using App.Models;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using System.Text;
namespace App.Web.Controllers
{
 public class HomeController : Controller
 {
 AppDBContainer db = new AppDBContainer();
 public ActionResult Index()
 {
 IQueryable<SysModule> menus = db.SysModule.AsQueryable().Where(a=>a.ParentID=="0");
 StringBuilder sb = new StringBuilder();
 bool firstFlag = true;//第一个默认展开
 GetChildMenus(ref sb, menus, firstFlag);//二级菜单
 ViewBag.Menus = sb.ToString();
 return View();
 }
 //递归调用
 public void GetChildMenus(ref StringBuilder sb, IQueryable<SysModule> menus,bool firstFlag)//二级以上菜单
 {
 int count = 0;
 if(!firstFlag)
 sb.Append("<ul class='sub-menu'>");
 foreach (var m in menus)
 {
 IQueryable<SysModule> menusChild = db.SysModule.AsQueryable().Where(a => a.ParentID == m.ID);
 count = menusChild.Count();
 sb.AppendFormat("<li class='{0}'>",firstFlag"start actove open":"");
 sb.AppendFormat("<a href='{0}'><i class='{1}'></i><span class='title'>{2}</span>{3}</a>", count > 0 "javascript:;" : m.Url, m.Iconic, m.Name, count > 0 "<span class='arrow '></span>" : "");
 firstFlag = false;
 if (count > 0)
 GetChildMenus(ref sb, menusChild,firstFlag);
 sb.Append("</li>");
 }
 if (!firstFlag)
 sb.Append("</ul>");
 
 }
 }
}



去掉提取的li替换成@Html.Raw(ViewBag.Menus) 
6.总结

前端这种东西最考验人的耐心，不信你自己拼接一下

最后效果 

 作者：YmNets

出处：http://ymnets.cnblogs.com/
如果大家还想深入学习，可以点击这里进行学习，再为大家附两个精彩的专题：Bootstrap学习教程 Bootstrap实战教程
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

Bootstrap,Metronic,菜单栏

DDR爱好者之家 Design By 杰米

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！

DDR爱好者之家 Design By 杰米

评论“Bootstrap Metronic完全响应式管理模板之菜单栏学习笔记”

暂无评论...

更新日志

2024年11月29日

Bootstrap Metronic完全响应式管理模板之菜单栏学习笔记

Augularjs-起步详解

Bootstrap Metronic完全响应式管理模板学习笔记

评论“Bootstrap Metronic完全响应式管理模板之菜单栏学习笔记”

更新日志

友情链接