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

前端之家收集整理的这篇文章主要介绍了Bootstrap Metronic完全响应式管理模板之菜单栏学习笔记前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

<p style="text-align: left">继续<a target="_blank" href="//www.jb51.cc/article/88166.htm">上一篇,针对Bootstrap Metronic菜单栏整理的笔记分享给大家,供大家参考,具体内容如下


<p style="text-align: left">

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

/** 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 NOT NULL,--主键ID
[Name] varchar NOT NULL,--菜单名称
[ParentID] varchar NULL,--上级ID
[Url] varchar NULL,--URL
[Iconic] varchar 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

人为造点数据

(22 行受影响)

4.提取页面重要布局

我们是后台系统所以我们保留top. left menu和foot3个部分 我已经提取好了,请复制

Metronic | 版面展示 ...
  • ...
    SmartBizz PTL
  • ...
  • ...
    Back
    • Feeds list-items">
      Enable Notifications Box" class="make-switch" checked data-size="small" data-on-color="success" data-on-text="ON" data-off-color="default" data-off-text="OFF">
    • Allow Tracking Box" class="make-switch" data-size="small" data-on-color="info" data-on-text="ON" data-off-color="default" data-off-text="OFF">
    • Log Errors Box" class="make-switch" checked data-size="small" data-on-color="danger" data-on-text="ON" data-off-color="default" data-off-text="OFF">
    • Auto Sumbit Issues Box" class="make-switch" data-size="small" data-on-color="warning" data-on-text="ON" data-off-color="default" data-off-text="OFF">
    • Enable SMS Alerts Box" class="make-switch" checked data-size="small" data-on-color="success" data-on-text="ON" data-off-color="default" data-off-text="OFF">

      Security Level
    • Failed Email Attempts
    • Secondary SMTP Port @H_256_502@
    • Notify On System Error Box" class="make-switch" checked data-size="small" data-on-color="danger" data-on-text="ON" data-off-color="default" data-off-text="OFF">
    • Notify On SMTP Error Box" class="make-switch" checked data-size="small" data-on-color="warning" data-on-text="ON" data-off-color="default" data-off-text="OFF">
    Save Changes

    再次提取菜单代码

    大约在466行-529行 分析上面html可以看出,li包含ul循环调用。所以我们用递归读取菜单

    5.拼接菜单

    创建Home视图Index.cshtml并应用_Layout.cshtml Bootstrap Metronic并菜单没有提供Ajax模式,我们只能读取数据拼接HTML 过程:读取数据表数据递归调用

    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("");

    }
    }
    }

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

    6.总结

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

    作者:YmNets 出处:http://ymnets.cnblogs.com/

    如果大家还想深入学习,可以点击进行学习,再为大家附两个精彩的专题:

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

    猜你在找的Bootstrap相关文章