Extjs 3.4 动态树及权限

声明：我不是专业的web开发人员，对于前端的东西，如果不是因为这个项目，我还不知道什么才能接触上，Javascript 我看书的时间应该不会超过2个星期,PHP 看了个把星期关于MVC的概念，PHP 我觉得好理解，主要是如何去用，所以写出来的东西质量是可想而知的，在这里总结一下，希望可以帮的上需要帮助的人

关于权限：之前找了一些关于RBAC (role based access control) 的资料，我始终没有办法如何让它跟我的动态树结合起来，也问过专业的，都没有得到想要的，当然有很简单方法去实现，比如固定几个用户角色，写成配置文件，这是针对用户少的情况，经过一番努力我找到了我想要的解决方案  用户登入系统后，根据权限表加载相应的树节点，以及树节点相应的action (添加，删除，编辑，上传，查找 ...) 来设置button的 可用与不可用
一. 数据库表结构
t_role(角色表)
+-------------+--------------+------+-----+---------+----------------+
| Field       | Type         | Null | Key | Default | Extra          |
+-------------+--------------+------+-----+---------+----------------+
| f_rid       | tinyint(4)   | NO   | PRI | NULL    | auto_increment |
| f_rolenm    | varchar(200) | YES  |     | NULL    |                |
| f_rolealias | varchar(100) | YES  |     | NULL    |                |
| f_useable   | int(11)      | YES  |     | NULL    |                |
| f_remark    | varchar(255) | YES  |     | NULL    |                |
| f_ctdate    | varchar(255) | YES  |     | NULL    |                |
+-------------+--------------+------+-----+---------+----------------+
t_user(用户表)
+-------------+--------------+------+-----+---------+----------------+
| Field       | Type         | Null | Key | Default | Extra          |
+-------------+--------------+------+-----+---------+----------------+
| f_uid       | tinyint(4)   | NO   | PRI | NULL    | auto_increment |
| f_dep       | varchar(255) | YES  | MUL | NULL    |                |
| f_name      | varchar(255) | YES  |     | NULL    |                |
| f_passwd    | varchar(255) | YES  |     | NULL    |                |
| f_email     | varchar(255) | YES  |     | NULL    |                |
| f_creatdate | date         | YES  |     | NULL    |                |
| f_groups    | varchar(255) | YES  |     | NULL    |                |
| f_tel       | int(13)      | YES  |     | NULL    |                |
+-------------+--------------+------+-----+---------+----------------+
f_groups 表示用户是属于哪一个组（管理员,SA,IT,经理）

t_rolemapuser(角色用户对应表)
+--------+------------+------+-----+---------+----------------+
| Field  | Type       | Null | Key | Default | Extra          |
+--------+------------+------+-----+---------+----------------+
| id     | tinyint(4) | NO   | PRI | NULL    | auto_increment |
| roleId | int(7)     | NO   |     | NULL    |                |
| userId | int(7)     | NO   |     | NULL    |                |
+--------+------------+------+-----+---------+----------------+

t_resource(树节点表，Field格式最好这样，以免麻烦)
+------------+--------------+------+-----+---------+----------------+
| Field      | Type         | Null | Key | Default | Extra          |
+------------+--------------+------+-----+---------+----------------+
| resourceID | int(7)       | NO   | PRI | NULL    | auto_increment |
| id         | varchar(20)  | NO   |     | NULL    |                |
| text       | varchar(20)  | YES  |     | NULL    |                |
| parent_id  | varchar(20)  | YES  |     | NULL    |                |
| leaf       | varchar(5)   | YES  |     | NULL    |                |
| action     | varchar(255) | YES  |     | NULL    |                |
+------------+--------------+------+-----+---------+----------------+
注：在表中可以添加一栏设置节点样式
    action 就是对应节点资源对应的操作
+------------+--------------+-----------------+--------------+-------+-------------------------------------------+
| resourceID | id           | text            | parent_id    | leaf  | action                                    |
+------------+--------------+-----------------+--------------+-------+-------------------------------------------+
|          1 | yunweicenter | 运维中心        | 0            | false | 上传,删除,下载,添加,查找,编辑             |
|          2 | pm           | 服务器          | yunweicenter | true  | 编辑,添加,查找                            |
|          3 | vm           | 虚拟机          | yunweicenter | true  | 查找,添加,删除,编辑                       |

t_action(操作表)
+-------+--------+----------+
| f_oId | f_onm  | f_alias  |
+-------+--------+----------+
|     1 | 添加   | add      |
|     2 | 删除   | del      |
|     3 | 编辑   | edit     |
|     4 | 查找   | search   |
|     5 | 上传   | upload   |
|     6 | 下载   | download |
+-------+--------+----------+

t_rights(权限表)
+-----------+------------+------+-----+---------+----------------+
| Field     | Type       | Null | Key | Default | Extra          |
+-----------+------------+------+-----+---------+----------------+
| f_powerid | int(10)    | NO   | PRI | NULL    | auto_increment |
| f_roleId  | tinyint(4) | YES  |     | NULL    |                |
| f_resId   | int(10)    | YES  |     | NULL    |                |
| f_oid     | int(4)     | YES  |     | NULL    |                |
+-----------+------------+------+-----+---------+----------------+
f_resId  对应t_resource 资源ID
f_oid  对应t_operation  ID
f_roleId   角色ID

1. 根据用户名取得userID
2. 根据userID 取得roleID
3. 根据roleID 取得相应的resourceID
4. 加载异步树
5. 根据roleID 取得 operationID 
   
6. 根据返回值设置树节点button 可用不可用，显示不显示
   

二，前端页面
    动态树：
    var root1 = new Ext.tree.AsyncTreeNode({
        expanded:true,
        text:'报表管理',
        id:'2', //树节点id
        draggable:false
    })

//树节点加载器
    var loader = new Ext.tree.TreeLoader({dataUrl:'/test/getTree.php'})

    var tree1 = new Ext.tree.TreePanel({
        root:root1,
        border:false,
        autoHeight:true,
        rootVisable:false,
        autoScroll:true,
        animate:true,
        containerScroll:true,
        loader:loader,
    });

    tree1.on('beforeload',function(node){
        tree1.loader.dataUrl= '/test/getTree.php?&id='+ node.id;//通过这个传递参数，这样就可以点一个节点出来它的子节点来实现异步加载
    });

获取树节点 getTree.php
session_start();
mysql_connect("host", "db", "passwd") or die("Could not connect");
mysql_select_db("solomon") or die("Could not select database");

$parent_id = $_GET['id'];
$user=$_SESSION['user'];
$rs = mysql_query("select id,text,leaf from t_resource where resourceID in (select b. resourceId from (select roleId from  t_usertorole where userId in
(select uid from t_user where name='{$user}')) a ,t_roletoperm b  where a.roleId=b.roleId) and parent_id='".$parent_id."'");
$str="[";
while($obj = mysql_fetch_assoc($rs)) {
        $str .= "{'id':\"$obj[id]\",'text':\"$obj[text]\",'leaf':$obj[leaf]},";
}
$str .= "]";
   
获取权限（demo）
   //获取权限设置相应的按钮
        Ext.Ajax.request({
                url: '/test/getPerm.php',
                params: {
                        resId: this.id,  // 本节点id   
                },
                method: "POST",
                success: function (response, options) {
                        if (response.responseText != "0") {
                                var hiddenObj =eval('('+ response.responseText + ')');
                                var j = (hiddenObj.addrec=="true")?false:true;
                                var k = (hiddenObj.editrec=="true")?false:true;
                                Ext.getCmp("addrec").setDisabled(j);   // 添加按钮id
                                Ext.getCmp("editrec").setDisabled(k);  // 删除按钮id
                        }else {
                                Ext.Msg.alert('错误', response.responseText.toString());

                                }
                        },
                        failure: function (response, options) {
                                Ext.Msg.alert('错误', '获取文件路径信息失败');
                        }
        })
获取权限getPerm.php
session_start();
mysql_connect("host", "db", "passwd") or die("Could not connect");
mysql_select_db("solomon") or die("Could not select database");

$res = $_POST['resId'];
$user = $_SESSION['user'];
$query = "select addrec,editrec,delrec from t_roletoperm where resourceId in (select  resourceID from t_resource where id='{$res}') and roleId = (select roleId from t_usertorole where userId in (select uid from t_user where name='{$user}'))";
$rs = mysql_query($query);
$obj = mysql_fetch_assoc($rs);

echo json_encode($obj);
?>

三，管理角色和用户
首先要搞清楚一个关系：一个用户可能1个和多个角色，一个角色可能有一个和多个用户，管理用户时，我们将用户放到相应的组就行了，如图

用户管理:



角色管理：



  模板资源管理：


整套东西基本就是这样，前端代码我不便发与大家分享，若有疑问可以留言，主要还是一个实现过程吧，考虑不足之前还请指出，欢迎讨论