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