基於技術：Json.net + Jquery + Jstree
員工：賬戶名（原賬戶：+自定義） 密碼 姓名 部門（樹形） 職務（員工 主管 經理 總監 副總裁 總裁）
使用角色（多選） （其他：入職時間 工號 花名 手機 郵箱 座機 ）
部門：客服（售前 售后） 運營 財務 倉儲 （自定義）
角色：倉儲物流 活動運營 美工設計 商品管理 售前客服 售后客服 等 （自定義）
權限：基於角色分配權限+補充權限
菜單：不同用戶不同權限對應不同菜單
《一》表設計如下：
Employee 員工
Department 部門
Role 角色
Permission 權限
RolePermission 為角色標識權限
Menu 菜單
MenuPermission 為菜單標識權限
Department 部門:
department_id
department_name
parent_id
level 第一級為1
sort_order
status
main_id 主賬號Id
Employee 子賬號基本信息：
employee_id 子賬號Id
employee_name 用戶名（zhangsan:no1）
employee_pwd
full_name 姓名
main_id 主賬號Id
main_name 主賬號用戶名
department_id
permissions 多選 ，隔開 補充權限
roses 多選 ，隔開
…………………………
status 1正常 -1刪除 2凍結
create_time
modified_time
Role 子賬號角色
role_id 角色id
role_name 角色名
permissions 所擁有權限 （ Permission[]）
description 角色描述
main_id 主賬號Id
create_time 創建時間
modified_time 修改時間
Permission：權限信息
permission_id
permission_code 權限編碼 string類型
permission_name 權限名稱
parent_code 父權限code
is_authorize 1 :允許授權 2：不允許授權 6：不允許授權但默認已有權限
Menu：菜單
menu_id
menu_name
menu_url
parent_id
sort_order
status
MenuPermission：菜單權限
id
menu_id
permissions 權限標識
SubUserPermission 實體 子賬號所擁有的權限對象(直接賦予的權限和通過角色賦予的權限的總和對象)
permissions 子賬號被直接賦予的權限點列表 Permission []
roles 子賬號被賦予的角色信息(Role)列表。Role [] 列表中的角色對象只有role_id，role_name，permissions信息
《二》初始化-綁定-獲取-設置選中 權限樹
例子：
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> <script type="text/javascript" src="jquery.jstree.js"></script> <script type="text/javascript"> $(function(){ var checkNodeIds = "12,22".split(","); $("#roleTree").jstree({ "themes": {"theme": "default", "dots": true, "icons": false },//設置有虛線，不顯示文件夾圖標 "json_data": { "ajax": { "url": "jsondata.ashx" } }, "plugins": ["themes", "json_data", "checkbox", "ui"] // html_data json_data 可以用html格式或者json格式 }) .bind("loaded.jstree", function (event, data) {//tree load完才做其他事 $("#roleTree").jstree("open_all"); $("#roleTree").find("li").each(function() { for (var i = 0; i < checkNodeIds.length; i++) { if ($(this).attr("id") == checkNodeIds[i]) { //alert($(this).attr("id")); $("#roleTree").jstree("check_node", $(this)); break; } } }) }); }); // 獲取選中id function checkForm(obj) { var ids = checkForm2(obj); alert(ids); } function checkForm2(obj) { var ids =[]; $.jstree._reference($("#roleTree")).get_checked(obj).each(function(i, n) { ids.push(n.id); if ($(this).find("> ul").length > 0) { ids.push(checkForm2($(this))); } }); return ids; } //根據ids數組 初始化選中 function setCheckedNode(ids){ //$.jstree._reference('#roleTree').uncheck_all(); $("#roleTree").jstree("uncheck_all");//清空 if(ids!=""){ var tempCheckStr=ids.split(','); $(tempCheckStr).each(function(i,item){ //$.jstree._reference('#roleTree').check_node("#"+item); $("#roleTree").jstree("check_node","#"+item); }) } } </script>
HTML：
<div id="roleTree" style="text-align:left; background-color:#FFFFFF;"> </div> <button onclick="checkForm()">查看選中的節點ID</button> <button onclick="setCheckedNode('3,31,32,33')">設置節點ID選中</button>
JSON格式：
[
{
"data": "諸葛亮",
"attr": {
"id": "1"
},
"children": [
{
"data": "諸葛亮1",
"attr": {
"id": "11"
},
"children": [
{
"data": "諸葛亮12",
"attr": {
"id": "112"
}
},
{
"data": "諸葛亮13",
"attr": {
"id": "113"
}
}
]
},
{
"data": "諸葛亮2",
"attr": {
"id": "12"
}
},
{
"data": "諸葛亮3",
"attr": {
"id": "13"
}
}
]
},
{
"data": "權限",
"attr": {
"id": "3"
},
"children": [
{
"data": "權限1",
"attr": {
"id": "31"
}
},
{
"data": "權限2",
"attr": {
"id": "32"
},
"children": [
{
"data": "曹操1",
"attr": {
"id": "21"
}
}
]
},
{
"data": "權限3",
"attr": {
"id": "33"
},
"children": []
}
]
}
]
部門樹
if(typeof departmentTree === 'undefined'){ departmentTree = {}; } jQuery.extend(departmentTree, CustomEvent); //渲染部門列表 departmentTree.getDepartmentHtml = function(data, isSub){ var html = '', ul = (isSub)? '<ul class="sub">': '<ul>'; html += ul; for(var i = 0, l = data.length; i < l; i++){ var item = data[i]; html += '<li>'; html += '<a href="#" key="department" departmentId="' + item.attr.id + '">' + item.attr.title + '</a>'; if(typeof(data[i].children) === 'object'){ //如果有子項，則遞歸 html += departmentTree.getDepartmentHtml(item.children, true); } html += '</li>'; } html += '</ul>'; return html; };
部門樹json格式：
{
"data": [
{
"data": {
"title": "學無止境-曾祥展"
},
"attr": {
"id": 123456,
"parentId": 0,
"title": "學無止境-曾祥展",
"level": 1
},
"state": "open",
"children": [
{
"data": {
"title": "xxx"
},
"attr": {
"id": 1212121,
"parentId": 123456,
"title": "xxxxx",
"level": 2
},
"children": [
{
"data": {
"title": "子部門"
},
"attr": {
"id": 454545454,
"parentId": 1212121,
"title": "子部門",
"level": 3
}
},……
}
主賬號擁有所有權限，子賬戶分配不同角色（可以多個），可以補充權限滿足需求，
用戶權限不同，顯示菜單也不同，粒度可到每一個操作權限……
針對需求，靈活設計……