《权限控制系列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来访问某些页面，正所谓防君子不妨小人啊。下一篇博客小编会继续介绍关于权限的控制。