《权限控制系列1》-----Ztree菜单的动态拼接

前言

在OA系统中，权限的控制是很常见的，最普通的权限关系就是用户-角色-权限之间的关系，用户拥有什么样的角色，角色拥有什么样的权限，今天小编简单的用Jquery的Ztree来粗粒度的控制一下用户的权限，其实主要就是将Ztree的使用。

必要的插件引用

jquery-1.4.2.js

jquery-ztree-2.5.js

zTreeStyle.css

HTML引用

<TABLE border=0 width="20">
<TR>
<TD width=340px align=center valign=top>
<div class="zTreeDemoBackground">
<ul id="menuTree" class="tree" ></ul>
</div>
</TD>
</TR>
</TABLE>

JS控制

var menu = {
setting: {
isSimpleData: true,
treeNodeKey: "mid",
treeNodeParentKey: "pid",
showLine: true,
root: {
isRoot: true,
nodes: []
}
},
loadMenuTree:function(){
$.post("elecMenuAction_showMenu.do",{},function(privilegeDate){
//privilegeDate数据一定是一个json的数组
$("#menuTree").zTree(menu.setting, privilegeDate);
});

}
};

$(document).ready(function(){
menu.loadMenuTree();
});

上面这段代码主要是利用JQuery的Ajax技术查询权限集合，将查询出来的数据动态的拼接成树。

原理

privilegeDate是Ajax请求成功后后台返回来的权限集合数据，我们根据用户角色ID去权限表中查询该角色拥有的权限集合，然后Ztree利用这写数据动态的拼接处权限菜单。

注意事项

值得注意的是，如果我们用JQuery的Ztree，数据库中的字段必须符合Ztree的要求，这些字段必须与Ztree的一些属性对应，比如说：treeNodeKey（节点id）、treeNodeParentKey（节点的父ID），url（节点指向的链接）、name（节点的名字）、icon（节点的图片）、isParent（是否为父节点）等等，如果我们需要这些属性，那么我们就应该在权限表中创建这些字段。如果大家还想继续研究一下Ztree的其它功能，可以查一下JQueryZtree的API，那里面有Demo，小编用的不全面，敬请谅解。下面是小编动态拼接出来的权限菜单。

小结

这只是粗粒度的权限控制，如果一般用户登录，我们虽然将Ztree的节点隐藏，但是用户还可以通过在浏览器中直接输入Url来访问某些页面，正所谓防君子不妨小人啊。下一篇博客小编会继续介绍关于权限的控制。