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 的菜单栏实现的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。