加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 （https://www.lidatong.com.cn/）- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置： 首页 > 综合聚焦 > 服务器 > 安全 > 正文

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

发布时间：2020-12-18 00:51:40 所属栏目：安全 来源：网络整理
导读：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）.动态生成

<p style="text-align: left">继续<a target="_blank" href="//www.52php.cn/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 | 版面展示
    • My Profile
    • My Calendar
    • My Inbox
    • My Tasks
    • Lock Screen
    • Log Out

      • <li class="start active open">
      <a href="javascript:;">
      <i class="icon-folder">
      <span class="title">Multi Level Menu
      <span class="arrow ">

      <ul class="sub-menu">

    • Item 1
        Sample Link 1
          Sample Link 1
        • Sample Link 1
        • Sample Link 1
      • Sample Link 1
      • Sample Link 2
      • Sample Link 3
    • Item 2
        Sample Link 1
      • Sample Link 1
      • Sample Link 1
    • Item 3

    • reports & statistics

    @RenderBody()
  • Notifications
  • Activities
  • Settings
    ...
    • ...

    ...
    • ...
    SmartBizz PTL
  • ...
  • ...

      Enable Notifications
    • Allow Tracking
    • Log Errors
    • Auto Sumbit Issues
    • Enable SMS Alerts

      Security Level
    • Failed Email Attempts
    • Secondary SMTP Port
    • Notify On System Error
    • Notify On SMTP Error
    Save Changes

    再次提取菜单代码

      Item 1
        Sample Link 1
          Sample Link 1
        • Sample Link 1
        • Sample Link 1
      • Sample Link 1
      • Sample Link 2
      • Sample Link 3
    • Item 2
        Sample Link 1
      • Sample Link 1
      • Sample Link 1
    • Item 3

    大约在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("
      "); 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/

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

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

    （编辑：李大同）

    【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!
      相关内容
        推荐文章
          站长推荐
          热点阅读

            【免责声明】本站内容转载自互联网，其发布内容言论不代表本站观点，如果其链接、内容的侵犯您的权益，烦请提交相关链接至邮箱bqsm@foxmail.com我们将及时予以处理。

            建议您使用1920×1080分辨率、谷歌浏览器Google Chrome、Microsoft Edge以获得本站的最佳浏览效果

            Copygight © 2008-2022 https://www.lidatong.com.cn/ All Rights Reserved. 李大同