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

最新推荐文章于 2023-02-08 11:57:26 发布
最新推荐文章于 2023-02-08 11:57:26 发布
阅读量219 收藏
点赞数
文章标签： bootstrap pagewrapper
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_39742471/article/details/111794266
版权
本文介绍了如何使用Bootstrap Metronic构建完全响应式的管理模板菜单栏，结合MVC5.0和EF6.0，通过SQLServer数据库进行数据交互，详细讲解了数据库设计、数据表创建、菜单数据的动态生成和递归拼接，以及视图的实现，提供了源代码示例。
摘要由CSDN通过智能技术生成

继续上一篇，针对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个部分

我已经提取好了，请复制

Metronic | 版面展示

  • Nick

    • My Profile

    • My Calendar

    • My Inbox

      3

    • My Tasks

      7

    • Lock Screen

    • Log Out

版面展示 reports & statistics

@RenderBody()

  • Users 2

  • Alerts 7

  • More

    • Alerts

    • Notifications

    • Activities

    • Settings

Staff

  • 8

    ...

    Bob Nilson

    Project Manager

  • ...

    Nick Larson

    Art Director

  • 3

    ...

    Deon Hubert

    CTO

  • ...

    Ella Wong

    CEO

Customers

  • 2

    ...

    Lara Kunis

    CEO, Loop Inc

    Last seen 03:10 AM

  • new

    ...

    Ernie Kyllonen

    Project Manager,

    SmartBizz PTL

  • ...

    Lisa Stone

    CTO, Keort Inc

    Last seen 13:10 PM

  • 7

    ...

    Deon Portalatin

    CFO, H&D LTD

  • ...

    Irina Savikova

    CEO, Tizda Motors Inc

  • 4

    ...

    Maria Gomez

    Manager, Infomatic Inc

    Last seen 03:10 AM

Back

Bob Nilson

20:15

When could you send me the report ?

Ella Wong

20:15

Its almost done. I will be sending it shortly

Bob Nilson

20:15

Alright. Thanks! :)

Ella Wong

20:16

You are most welcome. Sorry for the delay.

Bob Nilson

20:17

No probs. Just take your time :)

Ella Wong

20:40

Alright. I just emailed it to you.

Bob Nilson

20:17

Great! Thanks. Will check it right away.

Ella Wong

20:40

Please let me know if you have any comment.

Bob Nilson

20:17

Sure. I will check and buzz you if anything needs to be corrected.

General

  • You have 4 pending tasks.

    Take action

    Just now

  • Finance Report for year 2013 has been released.

    20 mins

  • You have 5 pending membership that requires a quick review.

    24 mins

  • New order received with

    Reference Number: DR23923

    30 mins

  • You have 5 pending membership that requires a quick review.

    24 mins

  • Web server hardware needs to be upgraded.

    Overdue

    2 hours

  • IPO Report for year 2013 has been released.

    20 mins

System

  • You have 4 pending tasks.

    Take action

    Just now

  • Finance Report for year 2013 has been released.

    20 mins

  • You have 5 pending membership that requires a quick review.

    24 mins

  • New order received with

    Reference Number: DR23923

    30 mins

  • You have 5 pending membership that requires a quick review.

    24 mins

  • Web server hardware needs to be upgraded.

    Overdue

    2 hours

  • IPO Report for year 2013 has been released.

    20 mins

General Settings

  • Enable Notifications

  • Allow Tracking

  • Log Errors

  • Auto Sumbit Issues

  • Enable SMS Alerts

System Settings

  • Security Level

    Normal

    Medium

    High

  • Failed Email Attempts

  • Secondary SMTP Port

  • Notify On System Error

  • Notify On SMTP Error

Save Changes

2014 © Metronic by keenthemes.

jQuery(document).ready(function() {

Metronic.init(); // init metronic core componets

Layout.init(); // init layout

QuickSidebar.init(); // init quick sidebar

Demo.init(); // init demo features

Index.init();

Index.init版面展示Daterange();

Index.initJQVMAP(); // init index page's custom scripts

Index.initCalendar(); // init index page's custom scripts

Index.initCharts(); // init index page's custom scripts

Index.initChat();

Index.initMiniCharts();

Tasks.init版面展示Widget();

});

再次提取菜单代码

Multi Level Menu

大约在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 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 menus,bool firstFlag)//二级以上菜单

{

int count = 0;

if(!firstFlag)

sb.Append("

  • ");

foreach (var m in menus)

{

IQueryable menusChild = db.SysModule.AsQueryable().Where(a => a.ParentID == m.ID);

count = menusChild.Count();

sb.AppendFormat("

",firstFlag?"start actove open":"");

sb.AppendFormat("{2}{3}", count > 0 ? "javascript:;" : m.Url, m.Iconic, m.Name, count > 0 ? "" : "");

firstFlag = false;

if (count > 0)

GetChildMenus(ref sb, menusChild,firstFlag);

sb.Append("

");

}

if (!firstFlag)

sb.Append("

");

}

}

}

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

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

最后效果

作者：YmNets

出处：http://ymnets.cnblogs.com/

如果大家还想深入学习，可以点击这里进行学习，再为大家附两个精彩的专题：Bootstrap学习教程 Bootstrap实战教程

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

weixin_39742471
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
python接口自动化脚本_使用 python 进行快速搭建接口自动化测试脚本实战总结
weixin_39772652的博客
11-20 663
一、测试需求介绍：通常，在我们的项目中，我们的接口测试需求一般都是构造不同的请求数据，然后发送请求到接口，拿到接口返回后，对返回的字段进行提取和校验，最后将结果存放在excel表格中方便查阅。接口一般是http或https请求，发送的结构一般是json body或json结合一些文件附件，请求的返回结果都是json格式，我们的测试case可以用Excel或者数据库保存，结果可以保存在数据库或者直接...
bootstrap pagewrapper_用Bootstrap3 做个导航栏
weixin_39613433的博客
12-21 298
导航栏元素在WEB上太常见了比如googlequery11.png微博weibo.png那么如何写出这样方便这样的组件使用bootstrap3吧！在网页中引入bootstrap3的方法见之前的文章直接说使用一般情况下导航放到如下的结构中nav标签第一层 class中 navbar是必须的 其他的属性是可选的添加navbar-default创建的是最基本的导航,不会固定在哪个位置...
js中事件委托
FengYang_的博客
09-10 525
** js中事件委托 ** ** 概念 事件的委托是指利用冒泡的原理，把事件加到父级上，触发执行效果。 好处: 提高性能 案例 首先看不使用事件委托时的代码 如下： <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> li { list-style: none;
bootstrap pagewrapper_Bootstrap中的提示插件(Tooltips)
weixin_39715348的博客
12-21 340
Tooltipstooltip.jsInsp有房移带近点子动的近点子动的近点子动的近ired by the excellent jQuery.tipsy plugin written by Jason Frame; Tooltips are an updated version, which don't rely on images, use CSS3 for animations, and d...
bootstrap pagewrapper_在中心Bootstrap 3网格旁边创建固定侧边栏
weixin_39781209的博客
12-21 438
HTMLHomeAnother linkNext linkLast linkCSS#wrapper {padding-left: 250px;transition: all 0.4s ease 0s;}#sidebar-wrapper {margin-left: -250px;left: 250px;width: 250px;background: #CCC;position: fixed;hei...
LCD菜单设计框架
11-11
LCD菜单系统的设计，多级菜单，利用链表的方式实现
bootstrap pagewrapper_基于jquery和Bootstrap3的隐藏侧边栏菜单
weixin_39880490的博客
12-21 456
这是一款响应式基于jquery和Bootstrap3的隐藏侧边栏菜单特效。该侧边栏菜单依赖于bootstrap3和Malihu滚动条美化插件，可以在桌面浏览器和移动手机上正常工作。使用方法在页面中引入jquery和bootstrap相关文件，以及font-awesome字体图标文件和mCustomScrollbar相关文件。HTML结构该bootstrap3 隐藏侧边栏菜单的完整HTML结构如下：...
mybatis多级关联查询数据封装
Jason
11-04 534
       最近一个项目用到mybatis，花了一点时间看了官方文档，后面就搭建起了框架，着手进行开发，mybatis上手很容易，但是有一些小的细节的注意(下文说明)，否则错误很难查找，对于用惯了Hibernate的开发人员来说，使用mybatis可能可能需要加强SQL。大概说一下mybatis优缺点，欢迎补充。   mybatis优点：     1. 易于上手和掌握。     2....
单片机 菜单
04-27
单片机液晶菜单显示 能实现多级菜单显示 适合初学者
单片机菜单
qq_39649731的博客
02-08 2248
单片机菜单目录结构设计，支持多级菜单扩展
单片机菜单设计
03-21
介绍了在C 语言环境下,在LCD 液晶显示屏上实现多级嵌套菜单的一种简便方法,提出了一个结构紧凑、实用的程序模型。
单片机菜单程序
12-13
非常适用的C51单片机LCD 3级菜单子程序 KeyFuncPtr=KeyTab[KeyFuncIndex].CurrentOperate; (*KeyFuncPtr)();//执行当前按键的操作 } //其中KeyTab的设计颇费尽心机
单片机菜单架构源码_单片机_Menu_菜单_
09-29
本人最近在做一款产品的菜单，主要实现光标跳动以及选择，因而分享出来，大家有需要的话可以作为参考！
单片机菜单模板，用菜单做一个时钟功能，包含闹钟功能
最新发布
03-24
包含万年历，菜单，闹钟，实时时钟功能，矩阵按键功能
mysql查询树有多少层_mysql树查询及分层级
weixin_33001305的博客
01-28 637
drop procedure proc_fi_deptment;DELIMITER //create PROCEDURE proc_fi_deptment()BEGIN/* 标记是否出错/declare t_error int default 0;/* 标记是否跳出循环/DECLARE flag int default 1;#层级DECLARE cj int default 0;#下层级DECL...
pythontkinter控件单选框怎么判断是否被选中_Query判断radio单选框是否被选中，并获取选中值...
weixin_39929721的博客
12-16 714
function checkradio(){var item = $(":radio:checked");var len=item.length;if(len>0){alert("yes--选中的值为："+$(":radio:checked").val());}}还有一个更经典的例子/p>"http://www.w3.org/TR/html4/loose.dtd">New Web...
mysql层次查询_层级构造数据之查询~mysqll函数查询_mysql
weixin_42415491的博客
01-19 344
层级结构数据之查询~mysqll函数查询MySQL 服务器版本 5.5.231、创建函数getMenuStr，获取所选层级所有子节点id串DROP FUNCTION IF EXISTS `getMenuTreeStr`; CREATE FUNCTION `getMenuTreeStr` (`sid` INT) RETURNS varchar(1000) BEGIN DECLARE tr...
【SQL / MySQL】Hierarchical Queries (层级结构查询)
XKIND'S 博客
03-13 845
这里写自定义目录标题Hierarchical QueriesID/PID 设计方案左右值树 设计方案 Hierarchical Queries 层次结构是表达数据的一种重要关系，在数据库设计中，如：组织机构、行政区划、菜单目录 等 都是层次关系数据的典型实例。设计方案总的来说主要是两大类。 ID/PID 设计方案 我们对Markdown编辑器进行了一些功能拓展与语法支持，除了标准的Markdown编辑器功能，我们增加了如下几点新功能，帮助你用它写博客： 原理 ：增加 parent_id 属性，存储父节点的
单片机 LCD 菜单架构
weixin_30549657的博客
09-30 742
参考了网上一些资料，写了一个还能用的单片机 LCD显示菜单，改起来还比较简单： 其中 MenuItem 中 itemIdx 可以不要，没有什么作用。 pSelectItem 也可以不要的。和 pCurItem 有点重复了。 实现效果如下：可以显示三级菜单。 //menu.h #define LCD_MaxItem 4 typedef struct st...
Bootstrap Metronic响应式菜单栏实战教程
本篇笔记详细介绍了如何在Bootstrap Metronic完全响应式管理模板中构建和配置菜单栏，适合对前端开发特别是使用Bootstrap框架进行管理界面设计的开发者参考。以下是主要内容概要： 1. **环境配置**： - 项目背景...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值