ABP+AdminLTE+Bootstrap Table權限管理系統第十節--AdminLTE模板菜單處理
返回總目錄:ABP+AdminLTE+Bootstrap Table權限管理系統一期html
AdminLTE菜單
上節咱們把佈局頁,也有的臨時的菜單,可是菜單不是應該動態加載的麼?,因此咱們這節來寫菜單.首先咱們看一下AdminLTE源碼裏面的菜單以及結構.sql
<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">4</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">3</small> <small class="label pull-right bg-blue">17</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">12</small> <small class="label pull-right bg-green">16</small> <small class="label pull-right bg-red">5</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> 404 Error</a></li> <li><a href="pages/examples/500.html"><i class="fa fa-circle-o"></i> 500 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(20)] public string Name { get; set; } /// <summary> /// 連接地址 /// </summary> [Required] [StringLength(50)] public string LinkUrl { get; set; } /// <summary> /// 是不是菜單 /// </summary> public bool IsMenu { get; set; } /// <summary> /// 模塊編號 /// </summary> public int Code { get; set; } /// <summary> /// 描述 /// </summary> [StringLength(100)] 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設計表結構windows
生成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和表,咱們就能夠設計modelapp
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(20)] public string Name { get; set; } [Required] [StringLength(50)] public string LinkUrl { get; set; } [StringLength(100)] 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方法添加以下代碼less
modelBuilder.Entity<Meun>().ToTable("[dbo].[Modules]");
JCmsErpDbContext方法下添加以下代碼:ide
public virtual IDbSet<Meun> Modules { get; set; }
MeunService遞歸
有了以上的基礎,咱們才能建立接口IMeunService和服務MeunService,這裏還沒涉及到菜單的curd,因此咱們只需建一個關於select方法就行.佈局
既然是父子結構就會涉及到遞歸.post
而後咱們LayoutController控制器引入接口調用MeunService的GetMeunList方法就完整的菜單了,我在數據庫插入一部分數據.ui
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>
至此,菜單完畢.
相關文章
- 1. ABP+AdminLTE+Bootstrap Table權限管理系統第九節--AdminLTE引入及模板頁和佈局和菜單 ABP+AdminLTE+Bootstrap Table權限管理系統一期 ABP
- 2. ABP+AdminLTE+Bootstrap Table權限管理系統第二節--在ABP的基礎作數據庫腳本處理 ABP+AdminLTE+Bootstrap Table權限管理系統一期 ABP+Admi
- 3. ABP module-zero +AdminLTE+Bootstrap Table+jQuery權限管理系統第十二節--小結,Bootstrap Table之角色管理
- 4. ABP+AdminLTE+Bootstrap Table權限管理系統第四節--倉儲,服務,服務接口及依賴注入 ABP+AdminLTE+Bootstrap Table權限管理系統一期 ABP+Admi
- 5. ABP+AdminLTE+Bootstrap Table權限管理系統第一節--使用ASP.NET Boilerplate模板創建解決方案
- 6. ABP+AdminLTE+Bootstrap Table權限管理系統第三節--abp分層體系,實體相關及ABP模塊系統
- 7. ABP+AdminLTE+Bootstrap Table權限管理系統一期
- 8. ABP+AdminLTE+Bootstrap Table權限管理系統第二節--在ABP的基礎做數據庫腳本處理
- 9. vue後臺管理系統的菜單權限處理
- 10. 第一節：OA權限管理系統
- 更多相關文章...
- • 錯誤處理 - RUST 教程
- • Swarm 集羣管理 - Docker教程
- • Docker 清理命令
- • Docker容器實戰(七) - 容器眼光下的文件系統
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
- 1. 在windows下的虛擬機中,安裝華爲電腦的deepin操作系統
- 2. 強烈推薦款下載不限速解析神器
- 3. 【區塊鏈技術】孫宇晨：區塊鏈技術帶來金融服務的信任變革
- 4. 搜索引起的鏈接分析-計算網頁的重要性
- 5. TiDB x 微衆銀行 | 耗時降低 58%，分佈式架構助力實現普惠金融
- 6. 《數字孿生體技術白皮書》重磅發佈（附完整版下載）
- 7. 雙十一「避坑」指南：區塊鏈電子合同爲電商交易保駕護航！
- 8. 區塊鏈產業，怎樣「鏈」住未來？
- 9. OpenglRipper使用教程
- 10. springcloud請求一次好用一次不好用zuul Name or service not known
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. ABP+AdminLTE+Bootstrap Table權限管理系統第九節--AdminLTE引入及模板頁和佈局和菜單 ABP+AdminLTE+Bootstrap Table權限管理系統一期 ABP
- 2. ABP+AdminLTE+Bootstrap Table權限管理系統第二節--在ABP的基礎作數據庫腳本處理 ABP+AdminLTE+Bootstrap Table權限管理系統一期 ABP+Admi
- 3. ABP module-zero +AdminLTE+Bootstrap Table+jQuery權限管理系統第十二節--小結,Bootstrap Table之角色管理
- 4. ABP+AdminLTE+Bootstrap Table權限管理系統第四節--倉儲,服務,服務接口及依賴注入 ABP+AdminLTE+Bootstrap Table權限管理系統一期 ABP+Admi
- 5. ABP+AdminLTE+Bootstrap Table權限管理系統第一節--使用ASP.NET Boilerplate模板創建解決方案
- 6. ABP+AdminLTE+Bootstrap Table權限管理系統第三節--abp分層體系,實體相關及ABP模塊系統
- 7. ABP+AdminLTE+Bootstrap Table權限管理系統一期
- 8. ABP+AdminLTE+Bootstrap Table權限管理系統第二節--在ABP的基礎做數據庫腳本處理
- 9. vue後臺管理系統的菜單權限處理
- 10. 第一節：OA權限管理系統