ABP+AdminLTE+Bootstrap Table权限管理系统第十节--AdminLTE模板菜单处理

返回总目录:ABP+AdminLTE+Bootstrap Table权限管理系统一期

AdminLTE菜单

上节我们把布局页,也有的临时的菜单,但是菜单不是应该动态加载的么?,所以我们这节来写菜单.首先我们看一下AdminLTE源码里面的菜单以及结构.

  <aside class="main-sidebar">
    <!-- sidebar: style can be found in sidebar.less -->
    <section class="sidebar">
      <!-- Sidebar user panel -->
      <div class="user-panel">
        <div class="pull-left image">
          <img src="dist/img/user2-160x160.jpg" class="img-circle" alt="User Image">
        </div>
        <div class="pull-left info">
          <p>Alexander Pierce</p>
          <a href="#"><i class="fa fa-circle text-success"></i> Online</a>
        </div>
      </div>
      <!-- search form -->
      <form action="#" method="get" class="sidebar-form">
        <div class="input-group">
          <input type="text" name="q" class="form-control" placeholder="Search...">
              <span class="input-group-btn">
                <button type="submit" name="search" id="search-btn" class="btn btn-flat"><i class="fa fa-search"></i>
                </button>
              </span>
        </div>
      </form>
      <!-- /.search form -->
      <!-- sidebar menu: : style can be found in sidebar.less -->
      <ul class="sidebar-menu">
        <li class="header">MAIN NAVIGATION</li>
        <li class="active treeview">
          <a href="#">
            <i class="fa fa-dashboard"></i> <span>Dashboard</span>
            <span class="pull-right-container">
              <i class="fa fa-angle-left pull-right"></i>
            </span>
          </a>
          <ul class="treeview-menu">
            <li class="active"><a href="index.html"><i class="fa fa-circle-o"></i> Dashboard v1</a></li>
            <li><a href="index2.html"><i class="fa fa-circle-o"></i> Dashboard v2</a></li>
          </ul>
        </li>
        <li class="treeview">
          <a href="#">
            <i class="fa fa-files-o"></i>
            <span>Layout Options</span>
            <span class="pull-right-container">
              <span class="label label-primary pull-right"></span>
            </span>
          </a>
          <ul class="treeview-menu">
            <li><a href="pages/layout/top-nav.html"><i class="fa fa-circle-o"></i> Top Navigation</a></li>
            <li><a href="pages/layout/boxed.html"><i class="fa fa-circle-o"></i> Boxed</a></li>
            <li><a href="pages/layout/fixed.html"><i class="fa fa-circle-o"></i> Fixed</a></li>
            <li><a href="pages/layout/collapsed-sidebar.html"><i class="fa fa-circle-o"></i> Collapsed Sidebar</a></li>
          </ul>
        </li>
        <li>
          <a href="pages/widgets.html">
            <i class="fa fa-th"></i> <span>Widgets</span>
            <span class="pull-right-container">
              <small class="label pull-right bg-green">new</small>
            </span>
          </a>
        </li>
        <li class="treeview">
          <a href="#">
            <i class="fa fa-pie-chart"></i>
            <span>Charts</span>
            <span class="pull-right-container">
              <i class="fa fa-angle-left pull-right"></i>
            </span>
          </a>
          <ul class="treeview-menu">
            <li><a href="pages/charts/chartjs.html"><i class="fa fa-circle-o"></i> ChartJS</a></li>
            <li><a href="pages/charts/morris.html"><i class="fa fa-circle-o"></i> Morris</a></li>
            <li><a href="pages/charts/flot.html"><i class="fa fa-circle-o"></i> Flot</a></li>
            <li><a href="pages/charts/inline.html"><i class="fa fa-circle-o"></i> Inline charts</a></li>
          </ul>
        </li>
        <li class="treeview">
          <a href="#">
            <i class="fa fa-laptop"></i>
            <span>UI Elements</span>
            <span class="pull-right-container">
              <i class="fa fa-angle-left pull-right"></i>
            </span>
          </a>
          <ul class="treeview-menu">
            <li><a href="pages/UI/general.html"><i class="fa fa-circle-o"></i> General</a></li>
            <li><a href="pages/UI/icons.html"><i class="fa fa-circle-o"></i> Icons</a></li>
            <li><a href="pages/UI/buttons.html"><i class="fa fa-circle-o"></i> Buttons</a></li>
            <li><a href="pages/UI/sliders.html"><i class="fa fa-circle-o"></i> Sliders</a></li>
            <li><a href="pages/UI/timeline.html"><i class="fa fa-circle-o"></i> Timeline</a></li>
            <li><a href="pages/UI/modals.html"><i class="fa fa-circle-o"></i> Modals</a></li>
          </ul>
        </li>
        <li class="treeview">
          <a href="#">
            <i class="fa fa-edit"></i> <span>Forms</span>
            <span class="pull-right-container">
              <i class="fa fa-angle-left pull-right"></i>
            </span>
          </a>
          <ul class="treeview-menu">
            <li><a href="pages/forms/general.html"><i class="fa fa-circle-o"></i> General Elements</a></li>
            <li><a href="pages/forms/advanced.html"><i class="fa fa-circle-o"></i> Advanced Elements</a></li>
            <li><a href="pages/forms/editors.html"><i class="fa fa-circle-o"></i> Editors</a></li>
          </ul>
        </li>
        <li class="treeview">
          <a href="#">
            <i class="fa fa-table"></i> <span>Tables</span>
            <span class="pull-right-container">
              <i class="fa fa-angle-left pull-right"></i>
            </span>
          </a>
          <ul class="treeview-menu">
            <li><a href="pages/tables/simple.html"><i class="fa fa-circle-o"></i> Simple tables</a></li>
            <li><a href="pages/tables/data.html"><i class="fa fa-circle-o"></i> Data tables</a></li>
          </ul>
        </li>
        <li>
          <a href="pages/calendar.html">
            <i class="fa fa-calendar"></i> <span>Calendar</span>
            <span class="pull-right-container">
              <small class="label pull-right bg-red"></small>
              <small class="label pull-right bg-blue"></small>
            </span>
          </a>
        </li>
        <li>
          <a href="pages/mailbox/mailbox.html">
            <i class="fa fa-envelope"></i> <span>Mailbox</span>
            <span class="pull-right-container">
              <small class="label pull-right bg-yellow"></small>
              <small class="label pull-right bg-green"></small>
              <small class="label pull-right bg-red"></small>
            </span>
          </a>
        </li>
        <li class="treeview">
          <a href="#">
            <i class="fa fa-folder"></i> <span>Examples</span>
            <span class="pull-right-container">
              <i class="fa fa-angle-left pull-right"></i>
            </span>
          </a>
          <ul class="treeview-menu">
            <li><a href="pages/examples/invoice.html"><i class="fa fa-circle-o"></i> Invoice</a></li>
            <li><a href="pages/examples/profile.html"><i class="fa fa-circle-o"></i> Profile</a></li>
            <li><a href="pages/examples/login.html"><i class="fa fa-circle-o"></i> Login</a></li>
            <li><a href="pages/examples/register.html"><i class="fa fa-circle-o"></i> Register</a></li>
            <li><a href="pages/examples/lockscreen.html"><i class="fa fa-circle-o"></i> Lockscreen</a></li>
            <li><a href="pages/examples/404.html"><i class="fa fa-circle-o"></i>  Error</a></li>
            <li><a href="pages/examples/500.html"><i class="fa fa-circle-o"></i>  Error</a></li>
            <li><a href="pages/examples/blank.html"><i class="fa fa-circle-o"></i> Blank Page</a></li>
            <li><a href="pages/examples/pace.html"><i class="fa fa-circle-o"></i> Pace Page</a></li>
          </ul>
        </li>
        <li class="treeview">
          <a href="#">
            <i class="fa fa-share"></i> <span>Multilevel</span>
            <span class="pull-right-container">
              <i class="fa fa-angle-left pull-right"></i>
            </span>
          </a>
          <ul class="treeview-menu">
            <li><a href="#"><i class="fa fa-circle-o"></i> Level One</a></li>
            <li>
              <a href="#"><i class="fa fa-circle-o"></i> Level One
                <span class="pull-right-container">
                  <i class="fa fa-angle-left pull-right"></i>
                </span>
              </a>
              <ul class="treeview-menu">
                <li><a href="#"><i class="fa fa-circle-o"></i> Level Two</a></li>
                <li>
                  <a href="#"><i class="fa fa-circle-o"></i> Level Two
                    <span class="pull-right-container">
                      <i class="fa fa-angle-left pull-right"></i>
                    </span>
                  </a>
                  <ul class="treeview-menu">
                    <li><a href="#"><i class="fa fa-circle-o"></i> Level Three</a></li>
                    <li><a href="#"><i class="fa fa-circle-o"></i> Level Three</a></li>
                  </ul>
                </li>
              </ul>
            </li>
            <li><a href="#"><i class="fa fa-circle-o"></i> Level One</a></li>
          </ul>
        </li>
        <li><a href="documentation/index.html"><i class="fa fa-book"></i> <span>Documentation</span></a></li>
        <li class="header">LABELS</li>
        <li><a href="#"><i class="fa fa-circle-o text-red"></i> <span>Important</span></a></li>
        <li><a href="#"><i class="fa fa-circle-o text-yellow"></i> <span>Warning</span></a></li>
        <li><a href="#"><i class="fa fa-circle-o text-aqua"></i> <span>Information</span></a></li>
      </ul>
    </section>
    <!-- /.sidebar -->
  </aside>

DTO设计

对,用ul标签和li标签包装起来的树.其实菜单都是树形结构,既然是树,那就涉及到父子结构,所以我们表就要有父菜单id,还要菜单名字,既然是菜单,要有菜单的连接,菜单是否启用,创建时间等.首先根据我们想到字段我们来设计dto

using Abp.AutoMapper;
using Abp.Domain.Entities;
using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.ComponentModel.DataAnnotations;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

namespace JCmsErp.Meuns
{
    /// <summary>
    /// 菜单
    /// </summary>
    [Serializable]
    [AutoMapFrom(typeof(Meun))]
    public class MeunDto
    {  /// <summary>
       /// id
       /// </summary>
        public int Id { get; set; }
        /// <summary>
        /// 父模块Id
        /// </summary>
        public int? ParentId { get; set; }
        /// <summary>
        /// 名称
        /// </summary>
        [Required]
        [StringLength()]
        public string Name { get; set; }
        /// <summary>
        /// 链接地址
        /// </summary>
        [Required]
        [StringLength()]
        public string LinkUrl { get; set; }

        /// <summary>
        /// 是否是菜单
        /// </summary>
        public bool IsMenu { get; set; }
        /// <summary>
        /// 模块编号
        /// </summary>
        public int Code { get; set; }
        /// <summary>
        /// 描述
        /// </summary>
        [StringLength()]
        public string Description { get; set; }
        /// <summary>
        /// 是否激活
        /// </summary>
        public bool Enabled { get; set; }

        public DateTime UpdateDate { get; set; }

        //public virtual MeunDto ParentModule { get; set; }
        //public List<MeunDto> ChildModules { get; private set; }
        public List<MeunDto> children { get; set; }
    }
}

数据表

有了dto,我们就可以根据dto设计表结构

生成sql语句.

USE [JCmsErp];
GO

SET ANSI_NULLS ON;
GO

SET QUOTED_IDENTIFIER ON;
GO

CREATE TABLE [dbo].[Modules]
    (
      [Id] [INT] IDENTITY(1, 1)
                 NOT NULL ,
      [ParentId] [INT] NULL ,
      [Name] [NVARCHAR](20) NOT NULL ,
      [LinkUrl] [NVARCHAR](50) NOT NULL ,
      [IsMenu] [BIT] NOT NULL ,
      [Code] [INT] NOT NULL ,
      [Description] [NVARCHAR](100) NULL ,
      [Enabled] [BIT] NOT NULL ,
      [UpdateDate] [DATETIME] NOT NULL ,
      CONSTRAINT [PK_dbo.Modules] 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

model

有了dto和表,我们就可以设计model

using Abp.Domain.Entities;
using System;
using System.Collections.Generic;
using System.ComponentModel.DataAnnotations;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

namespace JCmsErp.Meuns
{
    public class Meun : Entity<int>
    {
        public int? ParentId { get; set; }
        [Required]
        [StringLength()]
        public string Name { get; set; }
        [Required]
        [StringLength()]
        public string LinkUrl { get; set; }
        [StringLength()]
        public string Description { get; set; }
        public bool IsMenu { get; set; }
        public int Code { get; set; }
        public bool Enabled { get; set; }

        public DateTime UpdateDate { get; set; }

    }
}

首先我们在JCmsErp.EntityFramework的JCmsErpDbContext的OnModelCreating方法添加如下代码

  modelBuilder.Entity<Meun>().ToTable("[dbo].[Modules]");

JCmsErpDbContext方法下添加如下代码:

   public virtual IDbSet<Meun> Modules { get; set; }

MeunService递归

有了以上的基础,我们才能创建接口IMeunService和服务MeunService,这里还没涉及到菜单的curd,所以我们只需建一个关于select方法就行.

既然是父子结构就会涉及到递归.

然后我们LayoutController控制器引入接口调用MeunService的GetMeunList方法就完整的菜单了,我在数据库插入一部分数据.

LayoutController处理

看下LayoutController代码:

        private readonly IMeunService _iMeunService;
        public LayoutController(IMeunService iMeunService) {
            _iMeunService = iMeunService;
        }
        List<MeunDto> modules = new List<MeunDto>();

        public ActionResult _LeftSideMenus()
        {
            MeunViewModel model = new MeunViewModel();
            List<MeunDto> modules = _iMeunService.GetMeunList();
            model._LPBasicSet = modules;
            return PartialView("_LeftSideMenus", model);
        }

ViewModel

试图肯定不能用AdminLTE为我们提供的默认的菜单啊,需要我们改造一下.对了需要添加一个ViewModel

我已经添加好了

using JCmsErp.Meuns;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace JCmsErp.Web.Areas.Common.Models
{
    public class MeunViewModel
    {
        public List<MeunDto> _LPBasicSet = new List<MeunDto>();
        public List<MeunDto> LPBasicSet
        {
            get { return _LPBasicSet; }
            set { _LPBasicSet = value; }
        }
    }
}

看下试图代码:

@model JCmsErp.Web.Areas.Common.Models.MeunViewModel
@{
    Layout = null;
}

<aside class="main-sidebar">
    <!-- sidebar: style can be found in sidebar.less -->
    <section class="sidebar">
        <!-- Sidebar user panel (optional) -->
        <div class="user-panel">
            <div class="pull-left image">
                <img src="~/Scripts/AdminLTE-2.1.1/AdminLTE-2.1.1/dist/img/user2-160x160.jpg" class="img-circle" alt="User Image">
            </div>
            <div class="pull-left info">
                <p>Alexander Pierce</p>
                <!-- Status -->
                <a href="#"><i class="fa fa-circle text-success"></i> Online</a>
            </div>
        </div>
        <!-- search form (Optional) -->
        <form action="#" method="get" class="sidebar-form">
            <div class="input-group">
                <input type="text" name="q" class="form-control" placeholder="Search...">
                <span class="input-group-btn">
                    <button type="submit" name="search" id="search-btn" class="btn btn-flat">
                        <i class="fa fa-search"></i>
                    </button>
                </span>
            </div>
        </form>
        <!-- /.search form -->
        <!-- Sidebar Menu -->
        <ul class="sidebar-menu">
            <li class="active"><a href="/Common/Home/Index"><i class="fa fa-home"></i> <span>主页</span></a></li>

            @foreach (var item in Model.LPBasicSet)
            {
                <li class="treeview">
                    <a href="#">
                        <i class="fa fa-windows"></i> <span>@item.Name</span>
                        <i class="fa fa-angle-left pull-right"></i>
                    </a>

                    <ul class="treeview-menu">
                        @{
                            foreach (var child in item.children)
                            {
                                <li><a href="@Url.Content(@child.LinkUrl)">@child.Name</a></li>
                            }
                        }

                    </ul>
                </li>

                            }
        </ul><!-- /.sidebar-menu -->
        <!-- /.sidebar-menu -->
    </section>
    <!-- /.sidebar -->
</aside>

这里只需要foreach一下输出就可以了.需要注意的是关于AdminLTE的app.min.js的应用,开始我也不清楚,数据F12出来了,但是树死活点击不开,后来折腾了半天是这个js没有引用.

  <script src="~/Scripts/AdminLTE-2.1.1/AdminLTE-2.1.1/dist/js/app.min.js"></script>

至此,菜单完毕.

返回总目录:ABP+AdminLTE+Bootstrap Table权限管理系统一期