基于Ace Admin 的菜单栏实现
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
