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

前言

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

必要的插件引用

1. jquery-1.4.2.js
2. jquery-ztree-2.5.js
3. 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来访问某些页面，正所谓防君子不妨小人啊。下一篇博客小编会继续介绍关于权限的控制。