1.首先是数据库表必然包含以下几个字段Id ,ParnetId,Url,Name等

create table dbo.Module (Id                   uniqueidentifier     not null constraint DF_Module_Id default newid(),Name                 varchar(255)         collate Chinese_PRC_CI_AS not null constraint DF__Module__Name__46F27704 default ' ',Url                  varchar(255)         collate Chinese_PRC_CI_AS not null constraint DF__Module__Url__47E69B3D default ' ',IsLeaf               bit                  not null constraint DF__Module__IsLeaf__4AC307E8 default (1),IsAutoExpand         bit                  not null constraint DF__Module__IsAutoEx__4BB72C21 default (0),IconName             varchar(255)         collate Chinese_PRC_CI_AS not null constraint DF__Module__IconName__4CAB505A default ' ',Status               int                  not null constraint DF__Module__Status__4D9F7493 default (1),ParentName           varchar(255)         collate Chinese_PRC_CI_AS not null constraint DF__Module__ParentNa__4E9398CC default ' ',SortNo               int                  not null constraint DF__Module__SortNo__507BE13E default (0),ParentId             uniqueidentifier     null
)

2.服务端很简单,只要输出json格式就可以了

[
{
"Id": "bedb41a2-f310-4575-af99-01be01adda93",
"Name": "test",
"Url": "/",
"ParentId": "bedb41a2-f310-4775-af99-01be08adda93",
"IconName": "fa-users",
"Checked": false
},
{
"Id": "bedb41a2-f310-4775-af99-01be08adda93",
"Name": "角色管理",
"Url": "RoleManager.html",
"ParentId": "7580672f-a390-4bb6-982d-9a4570cb5199",
"IconName": "fa-users",
"Checked": false
},
{
"Id": "0031262c-689c-4b96-bae2-2c9d67076ade",
"Name": "流程设计",
"Url": "/flowmanage/flowdesign/index",
"ParentId": "7580672f-a390-4bb6-982d-9a4570cb5199",
"IconName": "fa-anchor",
"Checked": false
},
{
"Id": "e8dc5db6-4fc4-4795-a1cc-681cbcceec91",
"Name": "资源管理",
"Url": "/ResourceManager/Index",
"ParentId": "7580672f-a390-4bb6-982d-9a4570cb5199",
"IconName": "fa-calculator",
"Checked": false
},
{
"Id": "ef386d5d-cd58-43c0-a4ab-80afd0dbcd6c",
"Name": "用户管理",
"Url": "UserManager.html",
"ParentId": "7580672f-a390-4bb6-982d-9a4570cb5199",
"IconName": "fa-user",
"Checked": false
},
{
"Id": "7580672f-a390-4bb6-982d-9a4570cb5199",
"Name": "基础配置",
"Url": " ",
"ParentId": null,
"IconName": "fa-cog",
"Checked": false
},
{
"Id": "92b00259-2d15-43e7-9321-adffb29e8bf2",
"Name": "表单设计",
"Url": "/flowmanage/formdesign/index",
"ParentId": "7580672f-a390-4bb6-982d-9a4570cb5199",
"IconName": "fa-anchor",
"Checked": false
},
{
"Id": "bc80478d-0547-4437-9cff-be4b40144bdf",
"Name": "模块管理",
"Url": "ModuleManager.html",
"ParentId": "7580672f-a390-4bb6-982d-9a4570cb5199",
"IconName": "fa-file-code-o",
"Checked": false
},
{
"Id": "069475e3-c997-487a-9f29-e6a864c5c1d4",
"Name": "应用功能",
"Url": "/",
"ParentId": null,
"IconName": "fa-bars",
"Checked": false
},
{
"Id": "a94d5648-c2a9-405e-ba6f-f1602ec9b807",
"Name": "分类管理",
"Url": "/CategoryManager/Index",
"ParentId": "7580672f-a390-4bb6-982d-9a4570cb5199",
"IconName": "fa-archive",
"Checked": false
},
{
"Id": "6a9e1346-0c01-44d2-8eb1-f929fdab542a",
"Name": "部门管理",
"Url": "/OrgManager/Index",
"ParentId": "7580672f-a390-4bb6-982d-9a4570cb5199",
"IconName": "fa-plus-square-o",
"Checked": false
},
{
"Id": "89c3bfbe-246f-4112-8eb1-b6789da54202",
"Name": "进出库管理",
"Url": "/StockManager/Index",
"ParentId": "069475e3-c997-487a-9f29-e6a864c5c1d4",
"IconName": "fa-archive",
"Checked": false
},
{
"Id": "9486ff22-b696-4d7f-8093-8a3e53c45453",
"Name": "流程处理",
"Url": "/FlowManage/FlowInstances/Index",
"ParentId": "069475e3-c997-487a-9f29-e6a864c5c1d4",
"IconName": "fa-clock-o",
"Checked": false
}
]

3.重点在前端实现

(1)前端实现list转tree

/*** * */
var LTT, list, ltt;function pluck(collection, key) {return collection.map(function (item) {return item[key];});
}function unique(collection) {return collection.filter(function (value, index, array) {return array.indexOf(value) === index;});
}function sortBy(collection, propertyA, propertyB) {return collection.sort(function (a, b) {if (a[propertyB] < b[propertyB]) {if (a[propertyA] > b[propertyA]) {return 1;}return -1;} else {if (a[propertyA] < b[propertyA]) {return -1;}return 1;}});
};LTT = (function () {LTT.prototype.groupParent = [];LTT.prototype.key_id = 'id';LTT.prototype.key_parent = 'parent';LTT.prototype.key_child = 'child';LTT.prototype.options = {};function LTT(list, options) {this.list = list;this.options = options != null ? options : {};this.ParseOptions();//js不排序//this.list = sortBy(this.list, this.key_parent, this.key_id);this.groupParent = unique(pluck(this.list, this.key_parent));return this;}LTT.prototype.ParseOptions = function () {var that = this;['key_id', 'key_parent', 'key_child'].forEach(function (item) {if (typeof that.options[item] !== 'undefined') {that[item] = that.options[item];}});};LTT.prototype.GetParentItems = function (parent) {var item, result, _i, _len, _ref;result = [];_ref = this.list;for (_i = 0, _len = _ref.length; _i < _len; _i++) {item = _ref[_i];if (item[this.key_parent] === parent) {result.push(item);}}return result;};LTT.prototype.GetItemById = function (id) {var item, _i, _len, _ref;_ref = this.list;for (_i = 0, _len = _ref.length; _i < _len; _i++) {item = _ref[_i];if (item[this.key_id] === id) {return item;}}return false;};LTT.prototype.GetTree = function () {var child, i, obj, parentId, result, _i, _j, _len, _len1, _ref;result = [];_ref = this.groupParent;for (_i = 0, _len = _ref.length; _i < _len; _i++) {parentId = _ref[_i];obj = this.GetItemById(parentId);child = this.GetParentItems(parentId);if (obj === false) {for (_j = 0, _len1 = child.length; _j < _len1; _j++) {i = child[_j];result.push(i);}} else {obj[this.key_child] = child;}}return result;};return LTT;})();

使用方法

//
var ltt = new LTT(data, {key_id: 'Id',key_parent: 'ParentId',key_child:'Children'});var tree = ltt.GetTree();

(2)菜单html拼接实现

//实现菜单
function getDom(data) {if(!data){return ''}var _html='';$.each(data,function(i) {var row = data[i];if (row.hasOwnProperty("Children")) {_html += '<li>';_html += '<a href="#" class="dropdown-toggle">';_html += '<i class="menu-icon fa ' + row.IconName + '"></i>';_html += '<span class="menu-text nav-label">' + row.Name + '</span > ';_html += '<b class="arrow fa fa-angle-down"></b>';_html += '</a >';_html += '<b class="arrow"></b>';_html += '<ul class="submenu">';_html += getDom(row.Children);_html += '</ul>';_html += '</li>';} else {_html += '<li class="" id="' + row.Id + '">';_html += '<a class="J_menuItem" href="' + row.Url + '">';_html += '<i class="menu-icon fa ' + row.IconName + '"></i>';_html += '<span class="menu-text">' + row.Name + '</span>';_html += '</a>';_html += '<b class="arrow"></b>';_html += '</li>';}});return _html;
};

(3)最后实现

$.ajax({url: 'Api/Menu/GetTree',type: 'get',dataType: 'json',success: function (data) {var ltt = new LTT(data, {key_id: 'Id',key_parent: 'ParentId',key_child:'Children'});var tree = ltt.GetTree();console.log(tree);var html = getDom(tree);$("#side-menu").prepend(html);}})

附上ace官网地址

http://ace.jeka.by/index.html

转载于:https://www.cnblogs.com/hzzxq/p/7390522.html

基于Ace Admin 的菜单栏实现相关推荐

  1. easyui前端框架模板_.NET Core基于Ace Admin的响应式框架

    (给DotNet加星标,提升.Net技能) 转自:netnrcnblogs.com/netnr/p/12020660.html 前言 .NET Core的响应式框架 基于Ace Admin框架菜单导航 ...

  2. html响应式布局 ace,.NET Core基于Ace Admin的响应式框架

    原标题:.NET Core基于Ace Admin的响应式框架 转自:netnr cnblogs.com/netnr/p/12020660.html 前言 .NET Core的响应式框架 基于Ace A ...

  3. easy admin java_GitHub - zzccbb8/easyadmin: 简易的java后台管理框架,基于SpringBoot+FreeMark+ace admin+mysql...

    easyadmin 简介 一个简单好看的后台开发模板框架,目前具备用户管理,菜单管理和角色管理3个功能,也只打算做这3个,毕竟这是所有后台管理框架的核心,而本项目也只是打算做一个模板框架而已 优点 一 ...

  4. spring admin mysql_easyadmin: 简易的java后台管理框架,基于SpringBoot+FreeMark+ace admin+mysql...

    easyadmin 数据库一定要用utf8mb4编码,记得先执行manager.sql,再执行initdata.sql,其中tenant表不用管,这是我打算做的另外一个项目设计的表,因为直接复制的本项 ...

  5. YII与Ace Admin 的集成

    目录 一. 前言... 1 二.为什么要使用YII+ace. 1 三.新建YII模块... 1 四.如何修改模板... 3 五.注意的地方... 4 六.整合的不足之处... 4 一. 前言 yii- ...

  6. 基于ACE Proactor框架下高并发、大容量吞吐程序设计既最近的一个产品开发总结

    Reactor与 Proactor 基本概念 在高性能的I/O设计中,有两个比较著名的模式Reactor和Proactor模式,其中Reactor模式用于同步I/O,而Proactor运用于异步I/O ...

  7. 基于ACE的服务定位器(图失效)

    军械工程学院本科毕业论文 基于ACE的服务定位器 2006届计算机工程专业 指导教员:张剑炜 学员姓名:庄泽南 军械工程学院 二零零六年六月 论 文 摘 要 ACE自适配通信环境(ADAPTIVE C ...

  8. ace admin switch 开关中英文切换

    今天在开发项目的时候,遇到了ace admin switch开关切换的问题,默认的是英文,想改为中文,一开始以为是在js中控制的,可是找了很久都没有找到,后来在ace.min.css中找到了input ...

  9. 使用ACE admin实现无限添加菜单栏

    其实功能更其他的递归生成是完全相同的. 首先是在数据库创建一个数据表.需要包含ID与父ID 接下来是创建一个树结构的类,可以按照自己的需求,添加不同的字段 using System; using Sy ...

  10. 基于Ace的在线编辑器

    相信写OJ的小伙伴都会遇到一个问题,那就是在线编辑器的实现.到底要选哪个呢 其实开源的编辑器有挺多的比如Ace.CodeMirror.MonacoEditor.CodeFlask.EditArea.详 ...

最新文章

  1. BIEE建模 之 Administration 导入元数据时无法显示表
  2. Go中线程和协程的区别
  3. JavaScript的5种调用函数的方法
  4. java 跨站点脚本编制_AppScan跨站点脚本编制修复
  5. LOJ:黑暗城堡(最短路)
  6. ITIL基础概述与实战案例分析(下)
  7. 网络协议之NAT穿透原理
  8. 记录一个非常实用的gif制作工具licecap
  9. python 北上资金_python爬虫技术:北向资金数据自动爬取!
  10. 动图太大无法添加到微信表情怎么办?
  11. 免费AI数据标注工具-音频标注软件
  12. Linux命令和shell脚本 重点
  13. C语言基础 数字统计
  14. 中科红旗假竟拍与国有资产真流失
  15. ipconfig使用方法完整版
  16. open edx: ubuntu 16.04原生native 安装部署
  17. ionic4设置图标的大小
  18. PHP萌乐游戏代练系统V2.0源码 完整版可运营
  19. Unity3dRPG 相机跟随player旋转_人物头部和眼睛实现跟随目标转动的轻量级IK实践...
  20. TI Sitara系列AM64x开发板(双核ARM Cortex-A53)软硬件资料规格书

热门文章

  1. Android应用开发--MP3音乐播放器代码实现(一),学Android看这就完事了
  2. C程序设计语言(KR)笔记
  3. 【设计模式】-工厂模式->简单工厂模式(源码与类图解析)
  4. 用数组编程计算机的vb代码,VB 常用代码
  5. moodle php代码解读_基于PHP的课程管理系统——MOODLE平台
  6. 个人--2015 关于管理的书
  7. 专业PDF转换Word/PPT/Excel工具:AnyBizSoft PDF Converter绿色便携版
  8. 写滚动字幕html5源码,[转载]滚动字幕的源代码
  9. win98装python_Windows 上的 Python安装
  10. BT种子下载软件uTorrent Pro v3.5.5.45972