基于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